<template>
|
<view class="tn-number-box-class tn-number-box">
|
<!-- 减 -->
|
<view
|
class="tn-number-box__btn__minus"
|
:class="[
|
backgroundColorClass,
|
fontColorClass,
|
{'tn-number-box__btn--disabled': disabled || inputValue <= min}
|
]"
|
:style="{
|
backgroundColor: backgroundColorStyle,
|
height: $t.string.getLengthUnitValue(inputHeight),
|
color: fontColorStyle,
|
fontSize: fontSizeStyle
|
}"
|
@touchstart.stop.prevent="touchStart('minus')"
|
@touchend.stop.prevent="clearTimer"
|
>
|
<view class="tn-icon-reduce"></view>
|
</view>
|
|
<!-- 输入框 -->
|
<input
|
v-model="inputValue"
|
:disabled="disabledInput || disabled"
|
:cursor-spacing="getCursorSpacing"
|
class="tn-number-box__input"
|
:class="[
|
fontColorClass,
|
{'tn-number-box__input--disabled': disabledInput || disabled}
|
]"
|
:style="{
|
width: $t.string.getLengthUnitValue(inputWidth),
|
height: $t.string.getLengthUnitValue(inputHeight),
|
color: fontColorStyle,
|
fontSize: fontSizeStyle,
|
backgroundColor: backgroundColorStyle
|
}"
|
@blur="blurInput"
|
@focus="focusInput"
|
/>
|
|
<!-- 加 -->
|
<view
|
class="tn-number-box__btn__plus"
|
:class="[
|
backgroundColorClass,
|
fontColorClass,
|
{'tn-number-box__btn--disabled': disabled || inputValue >= max}
|
]"
|
:style="{
|
backgroundColor: backgroundColorStyle,
|
height: $t.string.getLengthUnitValue(inputHeight),
|
color: fontColorStyle,
|
fontSize: fontSizeStyle
|
}"
|
@touchstart.stop.prevent="touchStart('plus')"
|
@touchend.stop.prevent="clearTimer"
|
>
|
<view class="tn-icon-add"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import componentsColor from '../../libs/mixin/components_color.js'
|
|
export default {
|
mixins: [componentsColor],
|
name: 'tn-number-box',
|
props: {
|
value: {
|
type: Number,
|
default: 1
|
},
|
// 索引
|
index: {
|
type: [Number, String],
|
default: ''
|
},
|
// 最小值
|
min: {
|
type: Number,
|
default: 0
|
},
|
// 最大值
|
max: {
|
type: Number,
|
default: 99999
|
},
|
// 步进值
|
step: {
|
type: Number,
|
default: 1
|
},
|
// 禁用
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
// 是否禁用输入
|
disabledInput: {
|
type: Boolean,
|
default: false
|
},
|
// 输入框的宽度
|
inputWidth: {
|
type: Number,
|
default: 88
|
},
|
// 输入框的高度
|
inputHeight: {
|
type: Number,
|
default: 50
|
},
|
// 输入框和键盘之间的距离
|
cursorSpacing: {
|
type: Number,
|
default: 100
|
},
|
// 是否开启长按进行连续递增减
|
longPress: {
|
type: Boolean,
|
default: true
|
},
|
// 长按触发间隔
|
longPressTime: {
|
type: Number,
|
default: 250
|
},
|
// 是否只能输入正整数
|
positiveInteger: {
|
type: Boolean,
|
default: true
|
}
|
},
|
computed: {
|
getCursorSpacing() {
|
return Number(uni.upx2px(this.cursorSpacing))
|
}
|
},
|
data() {
|
return {
|
// 输入框的值
|
inputValue: 1,
|
// 长按定时器
|
longPressTimer: null,
|
// 标记值的改变是来自外部还是内部
|
changeFromInner: false,
|
// 内部定时器
|
innerChangeTimer: null
|
}
|
},
|
watch: {
|
value(val) {
|
// 只有value的改变是来自外部的时候，才去同步inputValue的值，否则会造成循环错误
|
if (!this.changeFromInner) {
|
this.updateInputValue()
|
// 因为inputValue变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
|
// 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
|
// 将changeFromInner设置为false
|
this.$nextTick(() => {
|
this.changeFromInner = false
|
})
|
}
|
},
|
inputValue(newVal, oldVal) {
|
// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
|
if (newVal === '') return
|
let value = 0
|
// 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
|
let isNumber = this.$t.test.number(newVal)
|
if (isNumber && newVal >= this.min && newVal <= this.max) value = newVal
|
else value = oldVal
|
|
// 判断是否只能输入大于等于0的整数
|
if (this.positiveInteger) {
|
// 小于0或者带有小数点
|
if (newVal < 0 || String(newVal).indexOf('.') !== -1) {
|
value = Math.floor(newVal)
|
// 双向绑定input的值，必须要使用$nextTick修改显示的值
|
this.$nextTick(() => {
|
this.inputValue = value
|
})
|
}
|
}
|
this.handleChange(value, 'change')
|
},
|
min() {
|
this.updateInputValue()
|
},
|
max() {
|
this.updateInputValue()
|
}
|
},
|
created() {
|
this.updateInputValue()
|
},
|
methods: {
|
// 开始点击按钮
|
touchStart(func) {
|
// 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
|
this[func]()
|
// 如果没有开启长按功能，直接返回
|
if (!this.longPress) return
|
// 清空长按定时器，防止重复注册
|
if (this.longPressTimer) {
|
clearInterval(this.longPressTimer)
|
this.longPressTimer = null
|
}
|
this.longPressTimer = setInterval(() => {
|
// 执行加减操作
|
this[func]()
|
}, this.longPressTime)
|
},
|
// 清除定时器
|
clearTimer() {
|
this.$nextTick(() => {
|
if (this.longPressTimer) {
|
clearInterval(this.longPressTimer)
|
this.longPressTimer = null
|
}
|
})
|
},
|
// 减
|
minus() {
|
this.computeValue('minus')
|
},
|
// 加
|
plus() {
|
this.computeValue('plus')
|
},
|
// 处理小数相加减出现溢出问题
|
calcPlus(num1, num2) {
|
let baseNum = 0, baseNum1 = 0, baseNum2 = 0
|
try {
|
baseNum1 = num1.toString().split('.')[1].length
|
} catch(e) {
|
baseNum1 = 0
|
}
|
try {
|
baseNum2 = num2.toString().split('.')[1].length
|
} catch(e) {
|
baseNum2 = 0
|
}
|
|
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
|
// 精度
|
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2
|
return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision)
|
},
|
calcMinus(num1, num2) {
|
let baseNum = 0, baseNum1 = 0, baseNum2 = 0
|
try {
|
baseNum1 = num1.toString().split('.')[1].length
|
} catch(e) {
|
baseNum1 = 0
|
}
|
try {
|
baseNum2 = num2.toString().split('.')[1].length
|
} catch(e) {
|
baseNum2 = 0
|
}
|
|
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
|
// 精度
|
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2
|
return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision)
|
},
|
// 处理操作后的值
|
computeValue(type) {
|
uni.hideKeyboard()
|
if (this.disabled) return
|
let value = 0
|
|
if (type === 'minus') {
|
// 减
|
value = this.calcMinus(this.inputValue, this.step)
|
} else if (type === 'plus') {
|
// 加
|
value = this.calcPlus(this.inputValue, this.step)
|
}
|
// 判断是否比最小值小和操作最大值
|
if (value < this.min || value > this.max) return
|
|
this.inputValue = value
|
this.handleChange(value, type)
|
},
|
// 处理用户手动输入
|
blurInput(event) {
|
let val = 0,
|
value = event.detail.value
|
// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
|
// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
|
if (!/(^\d+$)/.test(value) || value[0] == 0) {
|
val = this.min
|
} else {
|
val = +value
|
}
|
|
if (val > this.max) {
|
val = this.max
|
} else if (val < this.min) {
|
val = this.min
|
}
|
this.$nextTick(() => {
|
this.inputValue = val
|
})
|
this.handleChange(val, 'blur')
|
},
|
// 获取焦点
|
focusInput() {
|
this.$emit('focus')
|
},
|
// 初始化inputValue
|
updateInputValue() {
|
let value = this.value
|
if (value <= this.min) {
|
value = this.min
|
} else if (value >= this.max) {
|
value = this.max
|
}
|
|
this.inputValue = Number(value)
|
},
|
// 处理值改变状态
|
handleChange(value, type) {
|
if (this.disabled) return
|
// 清除定时器，防止混乱
|
if (this.innerChangeTimer) {
|
clearTimeout(this.innerChangeTimer)
|
this.innerChangeTimer = null
|
}
|
|
// 内部修改值
|
this.changeFromInner = true
|
// 一定时间内，清除changeFromInner标记，否则内部值改变后
|
// 外部通过程序修改value值，将会无效
|
this.innerChangeTimer = setTimeout(() => {
|
this.changeFromInner = false
|
}, 150)
|
this.$emit('input', Number(value))
|
this.$emit(type, {
|
value: Number(value),
|
index: this.index
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.tn-number-box {
|
display: inline-flex;
|
align-items: center;
|
|
&__btn {
|
&__plus,&__minus {
|
width: 60rpx;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
background-color: $tn-font-holder-color;
|
}
|
|
&__plus {
|
border-radius: 0 8rpx 8rpx 0;
|
}
|
|
&__minus {
|
border-radius: 8rpx 0 0 8rpx;
|
}
|
|
&--disabled {
|
color: $tn-font-sub-color !important;
|
background: $tn-font-holder-color !important;
|
}
|
}
|
|
&__input {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
text-align: center;
|
box-sizing: border-box;
|
padding: 0 4rpx;
|
margin: 0 6rpx;
|
background-color: $tn-font-holder-color;
|
|
&--disabled {
|
color: $tn-font-sub-color !important;
|
background: $tn-font-holder-color !important;
|
}
|
}
|
}
|
</style>
|
