flat: 页面初始化
This commit is contained in:
史典卓
BIN
components/.DS_Store
vendored
Normal file
BIN
components/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
components/bing-progress.zip
Normal file
BIN
components/bing-progress.zip
Normal file
Binary file not shown.
67
components/bing-progress/bing-progress.css
Normal file
67
components/bing-progress/bing-progress.css
Normal file
@@ -0,0 +1,67 @@
|
||||
.bing-progress {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.bp-marea {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: space-around;
|
||||
background-color: rgba(0,0,0,0);
|
||||
z-index: 6;
|
||||
}
|
||||
.bp-mview,
|
||||
.bp-handle {
|
||||
position: absolute;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
z-index: 5;
|
||||
}
|
||||
.bp-handle-text {
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
}
|
||||
.bp-bar_max {
|
||||
position: absolute;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bp-bar_active {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
.bp-bar_sub_active {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.bp-value {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
z-index: 4;
|
||||
}
|
||||
.bp-handle-widget {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
}
|
||||
868
components/bing-progress/bing-progress.vue
Normal file
868
components/bing-progress/bing-progress.vue
Normal file
@@ -0,0 +1,868 @@
|
||||
<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>
|
||||
16
components/zhuo-tabs/zhuo-tabs.vue
Normal file
16
components/zhuo-tabs/zhuo-tabs.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<view class="zhuo-tabs"></view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'zhuo-tabs',
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.zhuo-tabs
|
||||
</style>
|
||||
Reference in New Issue
Block a user