869 lines
26 KiB
Vue
869 lines
26 KiB
Vue
|
<template>
|
|||
|
|
<view class="bing-progress" :style="{width:bpWidth,height:bpHeight,borderRadius:borderRadius,
|
|||
|
|
backgroundColor:backgroundColor,flexDirection:direction!='vertical'?'row':'column'}">
|
|||
|
|
<!-- 进度 -->
|
|||
|
|
<!-- #ifdef APP-NVUE -->
|
|||
|
|
<div class="bp-bar_max"
|
|||
|
|
:style="{width:barMaxWidth,height:barMaxHeight,backgroundColor:noActiveColor,
|
|||
|
|
flexDirection:direction!='vertical'?'row':'column',left:barMaxLeft,borderRadius:barBorderRadius}">
|
|||
|
|
<div class="bp-bar_sub_active"
|
|||
|
|
:style="{width:barSubActiveWidth,height:barSubActiveHeight,backgroundColor:subActiveColor,
|
|||
|
|
top:subActiveTop,bottom:subActiveBottom,left:subActiveLeft,right:subActiveRight,borderRadius:isActiveCircular?barBorderRadius:0}"></div>
|
|||
|
|
<div class="bp-bar_active"
|
|||
|
|
:style="{width:barActiveWidth,height:barActiveHeight,backgroundColor:activeColor,
|
|||
|
|
top:activeTop,bottom:activeBottom,left:activeLeft,right:activeRight,borderRadius:isActiveCircular?barBorderRadius:0}"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifndef APP-NVUE -->
|
|||
|
|
<view class="bp-bar_max"
|
|||
|
|
:style="{width:barMaxWidth,height:barMaxHeight,backgroundColor:noActiveColor,borderRadius:barBorderRadius,
|
|||
|
|
flexDirection:direction!='vertical'?'row':'column',left:barMaxLeft}">
|
|||
|
|
<view class="bp-bar_sub_active"
|
|||
|
|
:style="{width:barSubActiveWidth,height:barSubActiveHeight,backgroundColor:subActiveColor,
|
|||
|
|
top:subActiveTop,bottom:subActiveBottom,left:subActiveLeft,right:subActiveRight,borderRadius:isActiveCircular?barBorderRadius:0}"></view>
|
|||
|
|
<view class="bp-bar_active"
|
|||
|
|
:style="{width:barActiveWidth,height:barActiveHeight,backgroundColor:activeColor,
|
|||
|
|
top:activeTop,bottom:activeBottom,left:activeLeft,right:activeRight,borderRadius:isActiveCircular?barBorderRadius:0}"></view>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<movable-area id="bp-marea" class="bp-marea" @touchmove.stop.prevent="touchmove" @touchstart.stop.prevent="touchstart" @touchcancel="touchend" @touchend="touchend"
|
|||
|
|
:style="{width:mareaWidth,height:mareaHeight,left:mareaLeft}">
|
|||
|
|
<!-- 拖柄 -->
|
|||
|
|
<movable-view id="bp-mview" class="bp-mview" :direction="direction=='vertical'?'vertical':'horizontal'" :animation="false"
|
|||
|
|
:disabled="true" :x="handleX" :y="handleY" friction="10" damping="100"
|
|||
|
|
:style="{width:mhandleWidth,height:mhandleHeight,backgroundColor:handleColor,
|
|||
|
|
borderRadius:handleBorderRadius,fontSize:infoFontSize,top:mhandleTop}">
|
|||
|
|
<view id="bp-handle" class="bp-handle" :style="{fontSize:infoFontSize,width:mhandleWidth,height:mhandleHeight,borderRadius:handleBorderRadius}">
|
|||
|
|
<image class="bp-handle-img" :src="handleImgUrl" v-if="handleImgUrl"
|
|||
|
|
:style="{fontSize:infoFontSize,width:mhandleWidth,height:mhandleHeight,borderRadius:handleBorderRadius}"></image>
|
|||
|
|
<!-- 进度值 -->
|
|||
|
|
<text class="bp-handle-text" v-if="handleImgUrl=='' && infoAlign=='handle' && showInfo"
|
|||
|
|
:style="{fontSize:infoFontSize,color:infoColor,width:mhandleWidth,height:textHeight,borderRadius:'20px'}">{{ infoContent=='subValue'?msubValue:showValue }}{{ infoEndText }}</text>
|
|||
|
|
<!-- 挂件 -->
|
|||
|
|
<!-- #ifndef APP-NVUE -->
|
|||
|
|
<!-- 图片挂件 -->
|
|||
|
|
<image v-if="widgetPos=='top' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius, bottom: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
|
|||
|
|
<image v-if="widgetPos=='right' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,left: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
|
|||
|
|
<image v-if="widgetPos=='bottom' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,top: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
|
|||
|
|
<image v-if="widgetPos=='left' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,right: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
|
|||
|
|
<!-- 自定义元素挂件 -->
|
|||
|
|
<view v-if="widgetPos=='top' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,bottom: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
|
|||
|
|
<slot/>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="widgetPos=='right' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,left: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
|
|||
|
|
<slot/>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="widgetPos=='bottom' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,top: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
|
|||
|
|
<slot/>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="widgetPos=='left' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,right: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
|
|||
|
|
<slot/>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</movable-view>
|
|||
|
|
</movable-area>
|
|||
|
|
<!-- 进度值 -->
|
|||
|
|
<text class="bp-value" v-if="showValueState() || (infoAlign=='center'&&direction!='vertical' && showInfo)"
|
|||
|
|
:style="{color:infoColor,fontSize:infoFontSize,left:valueLeft,width:valueWidth()+'px'}">{{ infoContent=='subValue'?msubValue:showValue }}{{ infoEndText }}</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* 进度条，副进度条
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
created() {
|
|||
|
|
/**
|
|||
|
|
* 获取系统屏幕信息，用于后续单位换算
|
|||
|
|
*/
|
|||
|
|
const systemInfo = uni.getSystemInfoSync()
|
|||
|
|
this.px2rpx = 750 / systemInfo.screenWidth
|
|||
|
|
this.screenWidth = systemInfo.screenWidth
|
|||
|
|
this.screenHeight = systemInfo.screenHeight
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// #ifndef APP-NVUE
|
|||
|
|
/**
|
|||
|
|
* 非NVUE movable-area 滑动事件获取到的位置是相对于文档的，获取组件位置，用于计算滑块位置
|
|||
|
|
*/
|
|||
|
|
this.updateRect()
|
|||
|
|
// #endif
|
|||
|
|
this.mmax = this.valueFormat(this.max,false)
|
|||
|
|
this.percent = Math.abs((this.valueFormat(this.value) - this.min) / (this.mmax - this.min))
|
|||
|
|
this.subPercent = Math.abs((this.valueFormat(this.subValue,true) - this.min) / (this.mmax - this.min))
|
|||
|
|
if(this.reverse) {
|
|||
|
|
if(this.direction!='vertical') {
|
|||
|
|
this.handleX = (1 - this.percent) * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.handleY = this.percent * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if(this.direction!='vertical') {
|
|||
|
|
this.handleX = this.percent * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.handleY = (1 - this.percent) * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(this.bpname=='test') {
|
|||
|
|
console.log(this.mainInfo)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* sub表示副进度条属性
|
|||
|
|
*/
|
|||
|
|
props: {
|
|||
|
|
// 组件名字
|
|||
|
|
bpname: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
width: {
|
|||
|
|
type: String,
|
|||
|
|
default: '300px'
|
|||
|
|
},
|
|||
|
|
strokeWidth: {
|
|||
|
|
type: String,
|
|||
|
|
default: '30px'
|
|||
|
|
},
|
|||
|
|
backgroundColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'rgba(0,0,0,0)'
|
|||
|
|
},
|
|||
|
|
noActiveColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: "#00ffff"
|
|||
|
|
},
|
|||
|
|
activeColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: "#0000ff"
|
|||
|
|
},
|
|||
|
|
subActiveColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: "#ffaaaa"
|
|||
|
|
},
|
|||
|
|
handleColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: "#ffff00"
|
|||
|
|
},
|
|||
|
|
infoColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: "#000000"
|
|||
|
|
},
|
|||
|
|
// 整个进度条的外边界圆角半径
|
|||
|
|
borderRadius: {
|
|||
|
|
type: String,
|
|||
|
|
default: '5px'
|
|||
|
|
},
|
|||
|
|
// 进度条内部滑轨圆角半径
|
|||
|
|
barBorderRadius: {
|
|||
|
|
type: String,
|
|||
|
|
default: '5px'
|
|||
|
|
},
|
|||
|
|
// active and subActive 是否显示圆角 NVUE默认true，其他默认false
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
isActiveCircular: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef APP-NVUE
|
|||
|
|
isActiveCircular: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
handleWidth: {
|
|||
|
|
type: String,
|
|||
|
|
default: '50px'
|
|||
|
|
},
|
|||
|
|
handleHeight: {
|
|||
|
|
type: String,
|
|||
|
|
default: '40px'
|
|||
|
|
},
|
|||
|
|
handleBorderRadius: {
|
|||
|
|
type: String,
|
|||
|
|
default: '5px'
|
|||
|
|
},
|
|||
|
|
handleImgUrl: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
disabled: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
direction: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'horizontal'
|
|||
|
|
},
|
|||
|
|
infoEndText: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
infoFontSize: {
|
|||
|
|
type: String,
|
|||
|
|
default: '18px'
|
|||
|
|
},
|
|||
|
|
showInfo: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 进度值显示value还是subValue
|
|||
|
|
infoContent: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'value'
|
|||
|
|
},
|
|||
|
|
// 进度值显示位置 left, right, center, handle
|
|||
|
|
infoAlign: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'right'
|
|||
|
|
},
|
|||
|
|
max: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 100
|
|||
|
|
},
|
|||
|
|
min: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
value: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
subValue: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
step: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 1
|
|||
|
|
},
|
|||
|
|
// 副进度条步长
|
|||
|
|
subStep: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 1
|
|||
|
|
},
|
|||
|
|
// true连续滑动，false步进，即以step的间隔变化
|
|||
|
|
continuous: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 副进度条continuous
|
|||
|
|
subContinuous: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
reverse: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 挂件位置 top, right, bottom, left
|
|||
|
|
widgetPos: {
|
|||
|
|
type: String,
|
|||
|
|
default: "top"
|
|||
|
|
},
|
|||
|
|
widgetHeight: {
|
|||
|
|
type: [String,Number],
|
|||
|
|
default: '40px'
|
|||
|
|
},
|
|||
|
|
widgetWidth: {
|
|||
|
|
type: [String,Number],
|
|||
|
|
default: '50px'
|
|||
|
|
},
|
|||
|
|
widgetBorderRadius: {
|
|||
|
|
type: [String,Number],
|
|||
|
|
default: '5px'
|
|||
|
|
},
|
|||
|
|
// 挂件不透明度 0完全透明 1不透明
|
|||
|
|
widgetOpacity: {
|
|||
|
|
type: [String,Number],
|
|||
|
|
default: 1
|
|||
|
|
},
|
|||
|
|
// 挂件距离组件的偏移量，正数原理组件，负数靠近组件
|
|||
|
|
widgetOffset: {
|
|||
|
|
type: [String,Number],
|
|||
|
|
default: '0px'
|
|||
|
|
},
|
|||
|
|
// 挂件图片
|
|||
|
|
widgetUrl: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 挂件旋转角度
|
|||
|
|
widgetAngle: {
|
|||
|
|
type: [String,Number],
|
|||
|
|
default: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
handleX: 50,
|
|||
|
|
handleY: 0,
|
|||
|
|
px2rpx: 1,
|
|||
|
|
percent: 0, // 0-1
|
|||
|
|
subPercent: 0, // 0-1
|
|||
|
|
mainInfo: {
|
|||
|
|
left: 0,
|
|||
|
|
top: 0,
|
|||
|
|
bottom: 0,
|
|||
|
|
right: 0
|
|||
|
|
},
|
|||
|
|
touchState: false,
|
|||
|
|
screenHeight: 0,
|
|||
|
|
screenWidth: 0,
|
|||
|
|
msubValue: 0,
|
|||
|
|
moveable: true,
|
|||
|
|
lastTouchTime: 0,
|
|||
|
|
mmax: 100
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
/**
|
|||
|
|
* @param {Object} newValue
|
|||
|
|
* @param {Object} oldValue
|
|||
|
|
*/
|
|||
|
|
value(newValue, oldValue) {
|
|||
|
|
if(!this.touchState) {
|
|||
|
|
newValue = this.valueSetBoundary(newValue)
|
|||
|
|
this.percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
showValue(newValue, oldValue) {
|
|||
|
|
// 步进
|
|||
|
|
if(!this.continuous) {
|
|||
|
|
let percent
|
|||
|
|
if(this.reverse) {
|
|||
|
|
if(this.direction!='vertical') {
|
|||
|
|
percent = Math.abs(1 - (newValue - this.min) / (this.mmax - this.min))
|
|||
|
|
this.handleX = percent * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
|
|||
|
|
this.handleY = percent * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if(this.direction!='vertical') {
|
|||
|
|
percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
|
|||
|
|
this.handleX = percent * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
percent = (1 - Math.abs((newValue - this.min) / (this.mmax - this.min)))
|
|||
|
|
this.handleY = percent * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
this.$emit("change", {bpname: this.bpname,type: 'change',value:this.showValue,subValue:this.msubValue})
|
|||
|
|
this.$emit("valuechange", {bpname: this.bpname,type: 'valuechange',value:this.showValue,subValue:this.msubValue})
|
|||
|
|
},
|
|||
|
|
percent(newValue, oldValue) {
|
|||
|
|
// 连续
|
|||
|
|
if(this.continuous) {
|
|||
|
|
if(this.reverse) {
|
|||
|
|
if(this.direction!='vertical') {
|
|||
|
|
this.handleX = (1 - newValue) * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.handleY = newValue * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if(this.direction!='vertical') {
|
|||
|
|
this.handleX = newValue * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.handleY = (1 - newValue) * this.barMaxLength
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
subValue(newValue, oldValue) {
|
|||
|
|
newValue = this.valueSetBoundary(newValue)
|
|||
|
|
|
|||
|
|
if(this.subContinuous) {
|
|||
|
|
this.msubValue = newValue
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.msubValue = this.valueFormat(newValue, true)
|
|||
|
|
}
|
|||
|
|
this.subPercent = Math.abs((newValue - this.min) / (this.mmax - this.min))
|
|||
|
|
this.$emit("change", {bpname: this.bpname,type: 'change',value:this.showValue,subValue:this.msubValue})
|
|||
|
|
this.$emit("subvaluechange", {bpname: this.bpname,type: 'subvaluechange',value:this.showValue,subValue:this.msubValue})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
max(newValue,oldValue) {
|
|||
|
|
this.mmax = this.valueFormat(newValue,false)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
bpWidth() {
|
|||
|
|
if(this.direction=="vertical") {
|
|||
|
|
return this.maxHeight()[2]
|
|||
|
|
}
|
|||
|
|
return this.sizeDeal(this.width)[2]
|
|||
|
|
},
|
|||
|
|
bpHeight() {
|
|||
|
|
if(this.direction=="vertical") {
|
|||
|
|
return this.sizeDeal(this.width)[2]
|
|||
|
|
}
|
|||
|
|
return this.maxHeight()[2]
|
|||
|
|
},
|
|||
|
|
mareaWidth() {
|
|||
|
|
if(this.direction=="vertical") {
|
|||
|
|
return this.maxHeight()[2]
|
|||
|
|
}
|
|||
|
|
let width = this.sizeDeal(this.width)[0]
|
|||
|
|
return (width - this.textWidth()) + 'px'
|
|||
|
|
},
|
|||
|
|
mareaHeight() {
|
|||
|
|
if(this.direction=="vertical") {
|
|||
|
|
let width = this.sizeDeal(this.width)[0]
|
|||
|
|
return (width - this.textWidth()) + 'px'
|
|||
|
|
}
|
|||
|
|
return this.maxHeight()[2]
|
|||
|
|
},
|
|||
|
|
mareaLeft() {
|
|||
|
|
if(this.showValueState()) {
|
|||
|
|
if(this.infoAlign == 'left') {
|
|||
|
|
return this.textWidth() + 'px'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
barMaxHeight() {
|
|||
|
|
if(this.direction=="vertical") {
|
|||
|
|
let width = this.sizeDeal(this.width)[0]
|
|||
|
|
let handleWidth = this.sizeDeal(this.handleWidth)
|
|||
|
|
return (width - this.textWidth() - handleWidth[0]) + 'px'
|
|||
|
|
}
|
|||
|
|
return this.sizeDeal(this.strokeWidth)[2]
|
|||
|
|
},
|
|||
|
|
barMaxWidth() {
|
|||
|
|
if(this.direction=="vertical") {
|
|||
|
|
return this.sizeDeal(this.strokeWidth)[2]
|
|||
|
|
}
|
|||
|
|
let width = this.sizeDeal(this.width)[0]
|
|||
|
|
let handleWidth = this.sizeDeal(this.handleWidth)
|
|||
|
|
return (width - this.textWidth() - handleWidth[0]) + 'px'
|
|||
|
|
},
|
|||
|
|
barMaxLeft() {
|
|||
|
|
if(this.showValueState()) {
|
|||
|
|
if(this.infoAlign == 'left') {
|
|||
|
|
return this.textWidth() + this.sizeDeal(this.handleWidth)[0] / 2 + 'px'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(this.direction != 'vertical') {
|
|||
|
|
return this.sizeDeal(this.handleWidth)[0] / 2 + 'px'
|
|||
|
|
}
|
|||
|
|
// vertical
|
|||
|
|
return (this.maxHeight()[0] - this.sizeDeal(this.strokeWidth)[0]) / 2 + 'px'
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
activeRight() {
|
|||
|
|
if(this.reverse) {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
return 'unset'
|
|||
|
|
},
|
|||
|
|
activeLeft() {
|
|||
|
|
if(this.reverse) {
|
|||
|
|
return 'unset'
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
activeTop() {
|
|||
|
|
if(this.reverse) {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
return 'unset'
|
|||
|
|
},
|
|||
|
|
activeBottom() {
|
|||
|
|
if(this.reverse) {
|
|||
|
|
return 'unset'
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
barActiveWidth() {
|
|||
|
|
if(this.direction=="vertical") {
|
|||
|
|
return this.sizeDeal(this.strokeWidth)[2]
|
|||
|
|
}
|
|||
|
|
let percent
|
|||
|
|
if(this.continuous) {
|
|||
|
|
percent = this.percent
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
percent = Math.abs((this.showValue - this.min) / (this.mmax - this.min))
|
|||
|
|
}
|
|||
|
|
return this.barMaxLength * percent + 'px'
|
|||
|
|
},
|
|||
|
|
barActiveHeight() {
|
|||
|
|
if(this.direction=="vertical") {
|
|||
|
|
let percent
|
|||
|
|
if(this.continuous) {
|
|||
|
|
percent = this.percent
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
percent = Math.abs((this.showValue - this.min) / (this.mmax - this.min))
|
|||
|
|
}
|
|||
|
|
return this.barMaxLength * percent + 'px'
|
|||
|
|
}
|
|||
|
|
return this.sizeDeal(this.strokeWidth)[2]
|
|||
|
|
},
|
|||
|
|
subActiveTop() {
|
|||
|
|
if(this.reverse) {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
return 'unset'
|
|||
|
|
},
|
|||
|
|
subActiveBottom() {
|
|||
|
|
if(this.reverse) {
|
|||
|
|
return 'unset'
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
subActiveRight() {
|
|||
|
|
if(this.reverse) {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
return 'unset'
|
|||
|
|
},
|
|||
|
|
subActiveLeft() {
|
|||
|
|
if(this.reverse) {
|
|||
|
|
return 'unset'
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
barSubActiveWidth() {
|
|||
|
|
if(this.direction == "vertical") {
|
|||
|
|
return this.sizeDeal(this.strokeWidth)[2]
|
|||
|
|
}
|
|||
|
|
if(this.subContinuous) {
|
|||
|
|
return this.barMaxLength * this.subPercent + 'px'
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
return this.barMaxLength * Math.abs((this.msubValue - this.min) / (this.mmax - this.min)) + 'px'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
barSubActiveHeight() {
|
|||
|
|
if(this.direction == "vertical") {
|
|||
|
|
if(this.subContinuous) {
|
|||
|
|
return this.barMaxLength * this.subPercent + 'px'
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.barMaxLength * Math.abs((this.msubValue - this.min) / (this.mmax - this.min)) + 'px'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
return this.sizeDeal(this.strokeWidth)[2]
|
|||
|
|
},
|
|||
|
|
mhandleWidth() {
|
|||
|
|
if(this.direction == "vertical") {
|
|||
|
|
return this.sizeDeal(this.handleHeight)[2]
|
|||
|
|
}
|
|||
|
|
return this.sizeDeal(this.handleWidth)[2]
|
|||
|
|
},
|
|||
|
|
mhandleHeight() {
|
|||
|
|
if(this.direction == "vertical") {
|
|||
|
|
return this.sizeDeal(this.handleWidth)[2]
|
|||
|
|
}
|
|||
|
|
return this.sizeDeal(this.handleHeight)[2]
|
|||
|
|
},
|
|||
|
|
mhandleTop() {
|
|||
|
|
if(this.direction == 'vertical') {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 拖柄垂直居中
|
|||
|
|
let handle = this.sizeDeal(this.handleHeight)[0]
|
|||
|
|
let top = this.maxHeight()[0] / 2 - handle / 2 + 'px'
|
|||
|
|
return top
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
showValue() {
|
|||
|
|
return this.valueFormat(this.percent * (this.mmax - this.min) + this.min)
|
|||
|
|
},
|
|||
|
|
textHeight() {
|
|||
|
|
let infoSize = this.sizeDeal(this.infoFontSize)
|
|||
|
|
return infoSize[0]*1.2 + infoSize[1]
|
|||
|
|
},
|
|||
|
|
valueLeft() {
|
|||
|
|
if(this.infoAlign=='left') {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
else if(this.infoAlign == 'center') {
|
|||
|
|
let width = this.sizeDeal(this.width)
|
|||
|
|
return width[0]/2 - this.valueWidth()/2 + 'px'
|
|||
|
|
}
|
|||
|
|
else if(this.infoAlign=='right'){
|
|||
|
|
let width = this.sizeDeal(this.width)
|
|||
|
|
return width[0] - this.textWidth() + 'px'
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
barMaxLength() {
|
|||
|
|
let width = this.sizeDeal(this.width)[0]
|
|||
|
|
let handleWidth = this.sizeDeal(this.handleWidth)
|
|||
|
|
return width - this.textWidth() - handleWidth[0]
|
|||
|
|
},
|
|||
|
|
mwidgetWidth() {
|
|||
|
|
return this.sizeDeal(this.widgetWidth)[2];
|
|||
|
|
},
|
|||
|
|
mwidgetHeight() {
|
|||
|
|
return this.sizeDeal(this.widgetHeight)[2];
|
|||
|
|
},
|
|||
|
|
moffset() {
|
|||
|
|
let off = this.sizeDeal(this.widgetOffset);
|
|||
|
|
// console.log(off)
|
|||
|
|
switch(this.widgetPos) {
|
|||
|
|
case 'top':
|
|||
|
|
return this.sizeDeal(this.mhandleHeight)[0] + off[0] + 'px'
|
|||
|
|
case 'right':
|
|||
|
|
return this.sizeDeal(this.mhandleWidth)[0] + off[0] + 'px'
|
|||
|
|
case 'bottom':
|
|||
|
|
return this.sizeDeal(this.mhandleHeight)[0] + off[0] + 'px'
|
|||
|
|
case 'left':
|
|||
|
|
return this.sizeDeal(this.mhandleWidth)[0] + off[0] + 'px'
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
mwidgetBorderRadius() {
|
|||
|
|
return this.sizeDeal(this.widgetBorderRadius)[2];
|
|||
|
|
},
|
|||
|
|
mwidgetAngle() {
|
|||
|
|
return "rotate("+Number(this.widgetAngle)+"deg)"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
prevent(e) {
|
|||
|
|
console.log(1)
|
|||
|
|
},
|
|||
|
|
updateRect() {
|
|||
|
|
// #ifndef APP-NVUE
|
|||
|
|
/**
|
|||
|
|
* 非NVUE movable-area 滑动事件获取到的位置是相对于文档的，获取组件位置，用于计算滑块位置
|
|||
|
|
*/
|
|||
|
|
let query = uni.createSelectorQuery().in(this)
|
|||
|
|
query.select('.bing-progress').boundingClientRect(data => {
|
|||
|
|
this.mainInfo.top = data.top
|
|||
|
|
this.mainInfo.left = data.left
|
|||
|
|
this.mainInfo.bottom = data.bottom
|
|||
|
|
this.mainInfo.right = data.right
|
|||
|
|
}).exec()
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
touchstart(e) {
|
|||
|
|
if(!this.disabled) {
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
e.stopPropagation()
|
|||
|
|
e.target.attr.preventGesture = true
|
|||
|
|
if(this.direction == 'vertical' && e.target.attr.id != 'bp-mview' && (e.timestamp - this.lastTouchTime > 100)) {
|
|||
|
|
this.moveable = false
|
|||
|
|
}
|
|||
|
|
this.lastTouchTime = e.timestamp
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef APP-NVUE
|
|||
|
|
/**
|
|||
|
|
* 防止组件在文档流中的位置被修改，导致组件进度值异常
|
|||
|
|
*/
|
|||
|
|
this.updateRect()
|
|||
|
|
// #endif
|
|||
|
|
// 阻止组件信息异常情况下的进度值修改
|
|||
|
|
if(this.mainInfo.top > this.screenHeight) {
|
|||
|
|
this.$emit("dragstart", {bpname: this.bpname,type: 'dragstart',value:this.showValue,subValue:this.msubValue})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.touchState = true
|
|||
|
|
let detail = e.changedTouches[0]
|
|||
|
|
this.handleMove(detail)
|
|||
|
|
this.$emit("dragstart", {bpname: this.bpname,type: 'dragstart',value:this.showValue,subValue:this.msubValue})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
touchmove(e) {
|
|||
|
|
if(!this.disabled) {
|
|||
|
|
let detail = e.changedTouches[0]
|
|||
|
|
this.handleMove(detail)
|
|||
|
|
this.$emit("dragging", {bpname: this.bpname,type: 'dragging',value:this.showValue,subValue:this.msubValue})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
touchend(e) {
|
|||
|
|
if(!this.disabled) {
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
if(!this.moveable) {
|
|||
|
|
this.moveable = true
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
let detail = e.changedTouches[0]
|
|||
|
|
this.handleMove(detail)
|
|||
|
|
this.touchState = false
|
|||
|
|
this.$emit("dragend", {bpname: this.bpname,type: 'dragend',value:this.showValue,subValue:this.msubValue})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleMove(detail) {
|
|||
|
|
let width = this.sizeDeal(this.width)[0]
|
|||
|
|
let handleWidth = this.sizeDeal(this.handleWidth)
|
|||
|
|
let percent
|
|||
|
|
if(this.direction!='vertical') {
|
|||
|
|
if(this.infoAlign=='left') {
|
|||
|
|
// #ifndef APP-NVUE
|
|||
|
|
percent = (detail.pageX - this.mainInfo.left - this.textWidth() - handleWidth[0]/2)/ this.barMaxLength
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
percent = (detail.pageX - handleWidth[0]/2)/ this.barMaxLength
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// #ifndef APP-NVUE
|
|||
|
|
percent = (detail.pageX - this.mainInfo.left - handleWidth[0]/2)/ this.barMaxLength
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
percent = (detail.pageX - handleWidth[0]/2)/ this.barMaxLength
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
percent = 1 - (detail.pageY - handleWidth[0]/2- 1) / this.barMaxLength
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef APP-NVUE
|
|||
|
|
percent = 1 - (detail.clientY - this.mainInfo.top - handleWidth[0]/2)/ this.barMaxLength
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
percent = percent > 0 ? percent : 0
|
|||
|
|
percent = percent < 1 ? percent : 1
|
|||
|
|
if(this.reverse) {
|
|||
|
|
this.percent = 1 - percent
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.percent = percent
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
showValueState() {
|
|||
|
|
if(this.direction != 'vertical' && this.showInfo && (this.infoAlign=='left' || this.infoAlign=='right')) {
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
return false
|
|||
|
|
},
|
|||
|
|
valueSetBoundary(value) {
|
|||
|
|
// 控制value在合法范围内
|
|||
|
|
if(this.mmax > this.min) {
|
|||
|
|
value = value < this.mmax ? value : this.mmax
|
|||
|
|
value = value > this.min ? value : this.min
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
value = value > this.mmax ? value : this.mmax
|
|||
|
|
value = value < this.min ? value : this.min
|
|||
|
|
}
|
|||
|
|
return value
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* @param {Object} v
|
|||
|
|
* @param {Object} isSub 是否是副副进度条
|
|||
|
|
*/
|
|||
|
|
valueFormat (v,isSub){
|
|||
|
|
// set step
|
|||
|
|
v = this.valueSetBoundary(v)
|
|||
|
|
let stepInfo = this.stepInfo(isSub)
|
|||
|
|
v = Number(v - this.min).toFixed(stepInfo[1])
|
|||
|
|
let step = stepInfo[0] * 10 ** stepInfo[1]
|
|||
|
|
let valueE = v * 10 ** stepInfo[1]
|
|||
|
|
let remainder = valueE % step
|
|||
|
|
let remainderInt = Math.floor(remainder)
|
|||
|
|
// 对余数四舍五入0-1
|
|||
|
|
let sub = Math.round(remainder / step)
|
|||
|
|
let value = (Math.floor(valueE) - remainderInt + sub*step) / (10 ** stepInfo[1])
|
|||
|
|
value = Number((value + this.min).toFixed(stepInfo[1]))
|
|||
|
|
return value
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* @param {Object} v
|
|||
|
|
* @param {Object} isSub 是否是副副进度条
|
|||
|
|
*/
|
|||
|
|
stepInfo(isSub) {
|
|||
|
|
// return step, decimal位数
|
|||
|
|
let step
|
|||
|
|
if(isSub) {
|
|||
|
|
step = Number(this.subStep)
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
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]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
textWidth() {
|
|||
|
|
if(this.showValueState()) {
|
|||
|
|
let numWidth = this.mmax.toString().length> this.min.toString().length? this.mmax.toString().length: this.min.toString().length
|
|||
|
|
let textWidth = ((numWidth + this.stepInfo()[1]) * 0.7 + this.infoEndText.length) * this.sizeDeal(this.infoFontSize)[0]
|
|||
|
|
return Number(textWidth.toFixed(2))
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
valueWidth() {
|
|||
|
|
let numWidth = this.mmax.toString().length> this.min.toString().length? this.mmax.toString().length: this.min.toString().length
|
|||
|
|
let textWidth = ((numWidth + this.stepInfo()[1]) * 0.7 + this.infoEndText.length) * this.sizeDeal(this.infoFontSize)[0]
|
|||
|
|
return Number(textWidth.toFixed(2))
|
|||
|
|
},
|
|||
|
|
maxHeight() {
|
|||
|
|
let h = []
|
|||
|
|
if (this.direction!='vertical'){ // direction 为 vertical 时不显示info
|
|||
|
|
let subt = this.infoEndText.match(/[^\x00-\xff]/g)
|
|||
|
|
if (subt){
|
|||
|
|
h.push(this.sizeDeal(this.infoFontSize)[0] * 1.1)
|
|||
|
|
}
|
|||
|
|
else{
|
|||
|
|
h.push(this.sizeDeal(this.infoFontSize)[0])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
h.push(this.sizeDeal(this.strokeWidth)[0])
|
|||
|
|
h.push(this.sizeDeal(this.handleHeight)[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.px2rpx
|
|||
|
|
u = 'px'
|
|||
|
|
}else if (u == 'vw') {
|
|||
|
|
u = 'px'
|
|||
|
|
s = s / 100 * this.screenWidth
|
|||
|
|
} else if(u == 'vh') {
|
|||
|
|
u = 'px'
|
|||
|
|
s = s / 100 * this.screenHeight
|
|||
|
|
} else{
|
|||
|
|
u = 'px'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return [s, u, s + u]
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
@import "bing-progress.css"
|
|||
|
|
</style>
|