BiKing/components/cu-progress/cu-progress.vue

<template>
	<view>
		<view class="cu-progress-main" :style="{'border-radius':bgBR,'width': progressMainW,'height': '22rpx','background-color': backgroundColor}">
			<view class="cu-progress" :style="{'left':areaLeft, 'flex-direction':flexDirection,'width':areaW,height:areaH}">
				<view class="cu-progress-bar" :style="{'bottom':pgBarBottom,'background':pgBarBg,'margin-left':pgBarML, 'margin-bottom':pgBarMB,'width': pgBarW,'height':pgBarH,'border-radius':pgBarBR,'background-color':noActiveColor}"></view>
				<view class="cu-progress-node">
					<text
						:class="['node-item' , showValue >= 0 ? 'active-node-item' : '' , showValue == 0 ? 'now-item' : '' ]"></text>
					<text
						:class="['node-item' , showValue >= 25 ? 'active-node-item' : '' , showValue == 25 ? 'now-item' : '' ]"></text>
					<text
						:class="['node-item' , showValue >= 50 ? 'active-node-item' : '' , showValue == 50 ? 'now-item' : '' ]"></text>
					<text
						:class="['node-item' , showValue >= 75 ? 'active-node-item' : '' , showValue == 75 ? 'now-item' : '' ]"></text>
					<text
						:class="['node-item' , showValue >= 100 ? 'active-node-item' : '' , showValue == 100 ? 'now-item' : '' ]"></text>
				</view>
				
				<movable-area class="cu-area" :style="{'flex-direction':flexDirection,'width':areaW,height:areaH}" @touchcancel="touchCancel" @touchstart="areaTouchStart"
				 @touchmove="areaTouchMove" @touchend="touchEnd">
					<movable-view class="cu-handle" disabled="disabled" :animation="false" :style="{ 'top':handleT, 'width':handleS,'height':handleS,'border-radius': handleBR,'background-color':handleColor}"
					 @change="change" :damping="damping" :x="handleX" :y="handleY" :direction="direction == 'vertical' ? 'vertical' : 'horizontal'">
						<text :class="handleIcon" :style="{'backgroundColor':iconColor,'font-size':iconS,'border-radius':iconBR}"></text>
					</movable-view>
				</movable-area>
			</view>
			<text v-if="getShowInfoStatus2view" class="cu-showInfo" :style="{'right':infoRt, 'left':infoLt, 'color':infoColor,'font-size':infoS,width:infoW}">{{showValue}}{{infoEndText}}</text>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scale: 1,
				percent: 0, // progress进度
				// pgbw: '10px', // progress-bar width
				showValue: 0, //显示进度
				showVL: 0, // showValue 最大长度
				handleMoveStatus: false,
				handleX: 0, // 拖柄位置
				handleY: 0,
				progressBarInfo: {
					left: 0,
					bottom: 0,
					width: 0,
					height: 0
				},
				area: {
					left: 0,
					bottom: 0,
					width: 0,
					height: 0,
					top: 0
				},
				handle: {
					height: 0
				}
			};
		},
		beforeMount: function() {
			const res = uni.getSystemInfoSync()
			this.scale = 750 / res.windowWidth;
			// 0 为 false
			if (this.maxValue - this.minValue == 0) {
				console.error("min不能等于max:" + this.minValue + "->" + this.maxValue)
				return
			}
			else{
				this.showValue = this.valueFormat(this.value)
			}
			this.percent = Math.abs(this.showValue - this.minValue) / Math.abs(this.maxValue - this.minValue) * 100
			let minl = this.textLength(this.minValue + this.infoEndText)
			let maxl = this.textLength(this.maxValue + this.infoEndText)
			this.showVL = maxl > minl ? maxl : minl
		},
		mounted: function() {
			this.$nextTick(function() {
				const query = uni.createSelectorQuery().in(this)
				query.select(".cu-progress-bar").boundingClientRect(data => {
					this.progressBarInfo.width = data.width
					this.progressBarInfo.left = data.left
					this.progressBarInfo.bottom = data.bottom
					this.progressBarInfo.height = data.height
					if (this.direction == 'vertical'){
						this.handleY = this.progressBarInfo.height * (100 - this.percent) / 100
					}
					else{
						this.handleX = this.progressBarInfo.width * this.percent / 100
					}
				}).exec()
				query.select(".cu-area").boundingClientRect(data => {
					this.area.width = data.width
					this.area.left = data.left
					this.area.height = data.height
					this.area.bottom = data.bottom
					this.area.top = data.top
				}).exec()
				query.select(".cu-handle").boundingClientRect(data => {
					this.handle.height = data.height
				}).exec()
			})
		},
		props: {
			infoAlign: {
				default: 'right',
				type: String
			},
			step: {
				default: 1,
				type: [String, Number]
			},
			direction: {
				default: 'horizontal', //vertical  方向
				type: String
			},
			disabled: {
				default: false,
				type: [String, Boolean]
			},
			bgBorderRadius: {
				default: 0,
				type: [Number, String]
			},
			iconBorderRadius: {
				default: '8px',
				type: [Number, String]
			},
			iconColor: {
				default: 'inherit',
				type: String
			},
			iconSize: {
				default: '8px',
				type: [Number, String]
			},
			handleIcon: {
				default: '',
				type: String
			},
			backgroundColor: {
				default: 'inherit',
				type: String
			},
			max: {
				default: 100,
				type: [String, Number]
			},
			min: {
				default: 0,
				type: [String, Number]
			},
			value: {
				default: null, // 设置进度条进度
				type: [String, Number]
			},
			activeColor: {
				default: '#444444', // 已经过区域颜色
				type: String
			},
			noActiveColor: {
				default: '#888888', // 为经过区域颜色
				type: String
			},
			strokeWidth: {
				default: '3', // 行程宽度
				type: [String, Number]
			},
			damping: {
				default: 100, // 阻尼系数，越大移动越快
				type: [String, Number]
			},
			handleColor: {
				default: '#000000', // 拖柄颜色
				type: String
			},
			handleSize: {
				default: '8px', // 拖柄尺寸
				type: [String, Number]
			},
			handleBorderRadius: {
				default: '8px', // 拖柄圆角半径
				type: [String, Number]
			},
			showInfo: {
				default: false, // 是否在进度条右侧显示百分比
				type: [Boolean, String]
			},
			infoSize: {
				default: '16px', // 百分比显示字体尺寸
				type: [String, Number]
			},
			infoColor: {
				default: '#000000', // 百分比显示字体颜色
				type: String
			},
			infoEndText: {
				default: '',
				type: String
			},
			borderRadius: {
				default: 0, // 进度条圆角半径
				type: [String, Number]
			},
			width: {
				default: '200px', // 进度条总宽，如果显示百分比，则包括百分比在内的宽度
				type: [String, Number]
			},
		},
		computed: {
			getShowInfoStatus2view(){
				if ((this.showInfo == true || this.showInfo == 'true') && this.direction != "vertical"){
					return true
				}
				else{
					return false
				}
			},
			showVLC (){
				let minl = this.textLength(this.minValue.toFixed(0) + this.infoEndText)
				let maxl = this.textLength(this.maxValue.toFixed(0) + this.infoEndText)
				
				let L = maxl > minl ? maxl : minl
				return L
			},
			flexDirection (){
				if (this.direction == 'vertical'){
					return 'column'
				}
				else{
					return 'row'
				}
			},
			pgBarBottom (){
				// progress-
				if (this.direction == 'vertical'){
					return '0px'
				}
				else{
					return 'unset'
				}
			},
			showInfoStatus (){
				if (this.getShowInfoStatus() && this.direction != "vertical"){
					return true
				}
				else{
					return false
				}
			},
			pgBarBg(){
				let bg1
				if (this.direction == 'vertical'){
					bg1 = "linear-gradient(to top," + this.activeColor + ' ' + this.percent + "%," + this.noActiveColor + ' ' + this.percent + "%)"
				}
				else{
					bg1 = "linear-gradient(to right," + this.activeColor + ' ' + this.percent + "%," + this.noActiveColor + ' ' + this.percent + "%)"
					// qq
					let bg2 = "-webkit-linear-gradient(left," + this.activeColor + ' ' + this.percent + "%," + this.noActiveColor + ' ' + this.percent + "%)"
					let bg3 = "-o-linear-gradient(right," + this.activeColor + ' ' + this.percent + "%," + this.noActiveColor + ' ' + this.percent + "%)"
					let bg4 = "-moz-linear-gradient(right," + this.activeColor + ' ' + this.percent + "%," + this.noActiveColor + ' ' + this.percent + "%)"
				}
				return bg1
			},
			pgBarBR(){
				return this.sizeDeal(this.borderRadius)[2]
			},
			bgBR() {
				return this.sizeDeal(this.bgBorderRadius)[2]
			},
			iconBR() {
				return this.sizeDeal(this.iconBorderRadius)[2]
			},
			iconS() {
				return this.sizeDeal(this.iconSize)[2]
			},
			infoW() {
				const s = this.sizeDeal(this.infoSize)
				const size = s[0] * this.showVL + s[1]
				return size
			},
			infoS() {
				return this.sizeDeal(this.infoSize)[2]
			},
			infoRt(){
				// showinfo right
				if (this.infoAlign == 'left' && this.direction != 'vertical'){
					return 'unset'
				}
				else{ return 0 }
			},
			infoLt(){
				if (this.infoAlign == 'left' && this.direction != 'vertical'){
					return 0
				}
				else if (this.infoAlign == 'center' && this.direction != 'vertical'){
					let aw = this.area.width / 2
					const s = this.sizeDeal(this.infoSize)
					const size = aw - (s[0] * this.showVL) / 2 + 'px'
					return size
				}
				else{ return 'unset' }
			},
			areaW: {
				get (){
					if (this.direction == 'vertical'){
						return this.maxHeight(true)[2]
					}
					else{
						const s = this.sizeDeal(this.infoSize)
						const h = this.maxHeight()
						let w
						if (this.getShowInfoStatus()) {
							w = 'calc(' + this.width + ' - ' + s[0] * this.showVL + s[1] + ')'
						} else { w = this.width }
						return w
					}
				},
				set (w){ return w }
				
			},
			areaH: {
				get(){
					if (this.direction == 'vertical'){ return this.width }
					else{ return this.maxHeight()[2] }
				},
				set (v){ return v }
				
			},
			areaLeft() {
				if (this.infoAlign == 'left' && this.direction != 'vertical'){
					const s = this.sizeDeal(this.infoSize)
					const size = s[0] * this.showVL + s[1]
					return size
				}
				else{ return 0 }
			},
			pgBarW() {
				// width
				if (this.direction == 'vertical'){
					return this.sizeDeal(this.strokeWidth)[2]
				}
				else{
					const s = this.sizeDeal(this.infoSize)
					const w = this.sizeDeal(this.width)
					const s2 = this.sizeDeal(this.handleSize)
					let w2
					if (this.getShowInfoStatus()) {
						w2 = 'calc(' + w[2] + ' - ' + s[0] * this.showVL + s[1] + ' - ' + s2[2] + ')'
					} else {
						w2 = 'calc(' + w[2] + ' - ' + s2[2] + ')'
					}
					return w2
				}
			},
			pgBarH() {
				// height
				if (this.direction == 'vertical'){
					const w = this.sizeDeal(this.width)
					const s2 = this.sizeDeal(this.handleSize)
					let	w2 = 'calc(' + w[2] + ' - ' + s2[2] + ')'
					return w2
				}
				else{ return this.sizeDeal(this.strokeWidth)[2] }
			},
			pgBarML() {
				// margin-left
				if (this.direction == 'vertical'){
					const s = this.sizeDeal(this.progressBarInfo.width)
					const ah = Number(this.area.width) / 2
					const t = ah - s[0] / 2 + 'px'
					return t
				}
				else{
					const s2 = this.sizeDeal(this.handleSize)
					return s2[0] / 2 + s2[1]
				}
			},
			pgBarMB() {
				// margin-bottom
				if (this.direction == 'vertical'){
					const s2 = this.sizeDeal(this.handleSize)
					return s2[0] / 2 + s2[1]
				}
				else{ return 0 }
			},
			handleS() {
				const s = this.sizeDeal(this.handleSize)
				return s[2]
			},
			handleL (){
				if (this.direction == 'vertical') {
					const s = this.sizeDeal(this.handleSize)
					const ah = Number(this.area.width) / 2
					const t = ah - s[0] / 2 + 'px'
					return t
				}
				else{
					return 'unset'
				}
			},
			handleT() {
				if (this.area.height && this.direction != 'vertical') {
					const s = this.sizeDeal(this.handleSize)
					const ah = Number(this.area.height) / 2
					const t = ah - s[0] / 2 + 'px'
					return t
				}
				else{
					return 'unset'
				}
			},
			handleBR() {
				const r = this.sizeDeal(this.handleBorderRadius)
				return r[2]
			},
			progressMainW() {
				let w
				if (this.direction == 'vertical'){
					w = this.maxHeight(true)[2]
				}
				else{
					w = this.width
				}
				return w
			},
			progressMainH() {
				let h
				if (this.direction == 'vertical'){
					h = this.width
				}
				else{
					h = this.maxHeight()[2]
				}
				return h
			},
			maxValue() {
				let max = Number.isNaN(parseFloat(this.max)) ? 100 : parseFloat(this.max)
				return this.valueFormat(max)
			},
			minValue() {
				let min = Number.isNaN(parseFloat(this.min)) ? 0 : parseFloat(this.min)
				let si = this.getStepInfo()
				return Number(min.toFixed(si[1]))
				// return this.valueFormat(min)
			},
		},
		watch: {
			showVLC (v){
				this.showVL = v
				if (this.direction != 'vertical'){
					const s = this.sizeDeal(this.infoSize)
					const h = this.maxHeight()
					let w
					if (this.getShowInfoStatus()) {
						w = 'calc(' + this.width + ' - ' + s[0] * this.showVL + s[1] + ')'
					} else {
						w = this.width
					}
					this.areaW = w
					this.areaH = h[2]
				}
				this.clientInit()
			},
			value(v) {
				// 当处于拖动状态时，禁止进度条外部触发变化
				if (!this.handleMoveStatus) {
					this.showValue = this.valueFormat(v)
					this.percent = (this.showValue - this.minValue) / Math.abs(this.maxValue - this.minValue) * 100
					if (this.direction == 'vertical'){
						this.handleY = this.progressBarInfo.height * this.percent / 100
					}
					else{
						this.handleX = this.progressBarInfo.width * this.percent / 100
					}
				}
			},
		},
		methods: {

			valueFormat (v){
				// set step
				v = Number(v - this.minValue).toFixed(7)
				let stepInfo = this.getStepInfo()
				let valueE = v * 10 ** stepInfo[1]
				let remainder = valueE % (stepInfo[0] * 10 ** stepInfo[1])
				let remainderInt = Math.floor(remainder)
				let value = (Math.floor(valueE) - remainderInt) / (10 ** stepInfo[1])
				return Number((value + this.minValue).toFixed(6))
			},
			getStepInfo() {
				// return step, decimal位数
				let step = Number(this.step)
				if (step <= 0 || !step){
					return [1, 0]
				}
				else{
					let steps = step.toString().split('.')
					if (steps.length == 1){
						return [step,0]
					}
					else {
						return [step,steps[1].length]
					}
				}
			},
			clientInit() {
				this.$nextTick(function() {
					const query = uni.createSelectorQuery().in(this)
					query.select(".cu-progress-bar").boundingClientRect(data => {
						this.progressBarInfo.width = data.width
						this.progressBarInfo.left = data.left
						this.progressBarInfo.bottom = data.bottom
						this.progressBarInfo.height = data.height
						if (this.direction == 'vertical'){
							this.handleY = this.progressBarInfo.height * this.percent / 100
						}
						else{
							this.handleX = this.progressBarInfo.width * this.percent / 100
						}
					}).exec()
					query.select(".cu-area").boundingClientRect(data => {
						this.area.width = data.width
						this.area.left = data.left
						this.area.height = data.height
						this.area.bottom = data.bottom
						this.area.top = data.top
					}).exec()
					if (this.maxValue - this.minValue == 0) {
						console.error("min不能等于max:" + this.minValue + "->" + this.maxValue)
					}
					else{
						let stepInfo = this.getStepInfo()
						let v =  this.percent * (this.maxValue - this.minValue) / 100
						let valueE = v * 10 ** stepInfo[1]
						let remainder = valueE % (stepInfo[0] * 10 ** stepInfo[1])
						let remainderInt = Math.floor(remainder)
						let sv = (Math.floor(valueE) - remainderInt) / (10 ** stepInfo[1])
						this.showValue = sv
					}
				})
			},
			getShowInfoStatus(){
				if ((this.showInfo == true || this.showInfo == 'true') && this.direction != "vertical" && this.infoAlign !== 'center'){
					return true
				}
				else{
					return false
				}
			},
			textLength(t) {
				t = t.toString()
				let int = t.split('.')[0]
				let subt = t.match(/[^\x00-\xff]/g)
				let subl = 0
				if (subt) {
					subl = subt.length
				}
				let l = (int.length - subl + this.getStepInfo()[1]) / 3 * 2 + subl + 0.2
				return Number(l.toFixed(2))
			},
			maxHeight(vertical) {
				let h = []
				if (!vertical){ // direction 为 vertical 时不显示info
					let subt = this.infoEndText.match(/[^\x00-\xff]/g)
					if (subt){
						h.push(this.sizeDeal(this.infoSize)[0] * 1.1)
					}
					else{
						h.push(this.sizeDeal(this.infoSize)[0])
					}
				}
				h.push(this.sizeDeal(this.strokeWidth)[0])
				h.push(this.sizeDeal(this.handleSize)[0])
				h.sort(function(a, b) {
					return b - a
				}) // 降序
				return [h[0], 'px', h[0] + 'px']
			},
			sizeDeal(size) {
				// 分离字体大小和单位,rpx 转 px
				let s = Number.isNaN(parseFloat(size)) ? 0 : parseFloat(size)
				let u = size.toString().replace(/[0-9]/g, '')
				if (u == 'rpx') {
					s /= this.scale
					u = 'px'
				} else if (u == '') {
					u = 'px'
				}else if (u == 'vw') {
					u = 'px'
					s = s / 100 * 750 / this.scale
				}
				return [s, u, s + u]
			},
			change (){
				this.$emit('change', {
					type: 'change',
					value: this.showValue,
					})
			},
			handleMove(x_) {
				let x = x_
				x = x >= 0 ? x : 0
				let s = this.sizeDeal(this.handleSize)
				let cp 
				let sv
				if (this.direction == 'vertical'){
					// #ifdef H5
					x = x - s[0] / 2 - this.area.bottom // ?
					cp = x / (this.area.height - s[0] - 1)
					// #endif
					// #ifndef H5
					x = x - this.area.top - s[0] / 2
					cp = x / (this.area.height - s[0] - 1)
					// #endif
					cp = cp <= 1 ? cp : 1
					cp = cp > 0 ? cp : 0
					let value = Number(((1 - cp) * (this.maxValue - this.minValue))) + this.minValue
					this.percent = (1 - cp) * 100
					this.showValue = this.valueFormat(value)
					this.handleY = x
				}
				else{
					cp = x / (this.area.width - s[0] - 1) // 多减 1 避免达不到maxValue
					cp = cp <= 1 ? cp : 1
					cp = cp > 0 ? cp : 0
					let value = Number((cp * (this.maxValue - this.minValue))) + this.minValue
					this.percent = cp * 100
					this.showValue = this.valueFormat(value)
					this.handleX = x
				}
				this.$emit('dragging', {
					type: 'dragging',
					value: this.showValue
				})
			},
			touchEnd() {
				if (!this.disabled){
					this.handleMoveStatus = false
					this.$emit('dragged', {
						type: 'dragged',
						value: this.showValue
					})
				}
			},
			areaTouchStart(e) {
				if (!this.disabled){
					this.handleMoveStatus = true
					let s = this.sizeDeal(this.handleSize)
					let tapX
					if (this.direction == 'vertical'){
						// #ifdef H5
						tapX = this.area.height + e.changedTouches[0].pageY
						// #endif
						// #ifndef H5
						tapX = e.changedTouches[0].pageY
						// #endif
					}
					else{
						tapX = e.changedTouches[0].pageX - this.area.left - s[0] / 2 // 拖柄中心与鼠标箭头一致
					}
					tapX = tapX >= 0 ? tapX : 0
					this.handleMove(tapX)
					this.$emit('dragstart', {
						type: 'dragstart',
						value: this.showValue
					})
				}
			},
			areaTouchMove(e) {
				if (!this.disabled){
					let s = this.sizeDeal(this.handleSize)
					let tapX 
					if (this.direction == 'vertical'){
						// #ifdef H5
						tapX = this.area.height + e.changedTouches[0].pageY
						// #endif
						// #ifndef H5
							tapX = e.changedTouches[0].pageY
						// #endif
					}
					else{
						tapX = e.changedTouches[0].pageX - this.area.left - s[0] / 2
					}
					tapX = tapX >= 0 ? tapX : 0
					this.handleMove(tapX)
				}
			},
			touchCancel() {
				if (!this.disabled){
					this.touchEnd()
					this.$emit('dragcancel', {
						type: 'dragcancel',
						value: this.showValue
					})
				}
			},
		}
	}
</script>

<style scoped>
	@import 'cu-progress.css'
</style>