|
@@ -1,229 +1,359 @@
|
|
|
<template>
|
|
|
- <view class="uni-numbox">
|
|
|
- <view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">
|
|
|
- <text class="uni-numbox--text">-</text>
|
|
|
+ <view class="u-numberbox">
|
|
|
+ <view class="u-icon-minus" @touchstart.stop.prevent="btnTouchStart('minus')" @touchend.stop.prevent="clearTimer"
|
|
|
+ :style="{
|
|
|
+ height: inputHeight + 'rpx',
|
|
|
+ color: color
|
|
|
+ }">
|
|
|
+ <uni-icons type="minus-filled" :color="disabled || inputVal <= min?'#c1c1c1':'#066cff'" :size="size"></uni-icons>
|
|
|
</view>
|
|
|
- <input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value"
|
|
|
- :type="step<1?'digit':'number'" v-model="inputValue" :style="{background, color, width:widthWithPx,height:heightPx}" />
|
|
|
- <view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">
|
|
|
- <text class="uni-numbox--text">+</text>
|
|
|
+ <input :disabled="disabledInput || disabled" :cursor-spacing="getCursorSpacing" :class="{ 'u-input-disabled': disabled }"
|
|
|
+ v-model="inputVal" class="u-number-input" @blur="onBlur" @focus="onFocus"
|
|
|
+ type="digit" :style="{
|
|
|
+ color: color,
|
|
|
+ fontSize: size + 'rpx',
|
|
|
+ background: bgColor,
|
|
|
+ height: inputHeight + 'rpx',
|
|
|
+ width: inputWidth + 'rpx'
|
|
|
+ }" />
|
|
|
+ <view class="u-icon-plus" @touchstart.stop.prevent="btnTouchStart('plus')" @touchend.stop.prevent="clearTimer"
|
|
|
+ :style="{
|
|
|
+ height: inputHeight + 'rpx',
|
|
|
+ color: color
|
|
|
+ }">
|
|
|
+ <uni-icons type="plus-filled" :color="disabled || inputVal >= max?'#c1c1c1':'#066cff'" :size="size"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
/**
|
|
|
- * NumberBox 数字输入框
|
|
|
- * @description 带加减按钮的数字输入框
|
|
|
- * @tutorial https://ext.dcloud.net.cn/plugin?id=31
|
|
|
- * @property {Number} value 输入框当前值
|
|
|
- * @property {Number} min 最小值
|
|
|
- * @property {Number} max 最大值
|
|
|
- * @property {Number} step 每次点击改变的间隔大小
|
|
|
- * @property {String} background 背景色
|
|
|
- * @property {String} color 字体颜色(前景色)
|
|
|
- * @property {Number} width 输入框宽度(单位:px)
|
|
|
- * @property {Boolean} disabled = [true|false] 是否为禁用状态
|
|
|
- * @event {Function} change 输入框值改变时触发的事件,参数为输入框当前的 value
|
|
|
- * @event {Function} focus 输入框聚焦时触发的事件,参数为 event 对象
|
|
|
- * @event {Function} blur 输入框失焦时触发的事件,参数为 event 对象
|
|
|
+ * numberBox 步进器
|
|
|
+ * @description 该组件一般用于商城购物选择物品数量的场景。注意:该输入框只能输入大于或等于0的整数,不支持小数输入
|
|
|
+ * @tutorial https://www.uviewui.com/components/numberBox.html
|
|
|
+ * @property {Number} value 输入框初始值(默认1)
|
|
|
+ * @property {String} bg-color 输入框和按钮的背景颜色(默认#F2F3F5)
|
|
|
+ * @property {Number} min 用户可输入的最小值(默认0)
|
|
|
+ * @property {Number} max 用户可输入的最大值(默认99999)
|
|
|
+ * @property {Number} step 步长,每次加或减的值(默认1)
|
|
|
+ * @property {Boolean} disabled 是否禁用操作,禁用后无法加减或手动修改输入框的值(默认false)
|
|
|
+ * @property {Boolean} disabled-input 是否禁止输入框手动输入值(默认false)
|
|
|
+ * @property {Boolean} positive-integer 是否只能输入正整数(默认true)
|
|
|
+ * @property {String | Number} size 输入框文字和按钮字体大小,单位rpx(默认26)
|
|
|
+ * @property {String} color 输入框文字和加减按钮图标的颜色(默认#323233)
|
|
|
+ * @property {String | Number} input-width 输入框宽度,单位rpx(默认80)
|
|
|
+ * @property {String | Number} input-height 输入框和按钮的高度,单位rpx(默认50)
|
|
|
+ * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
|
|
|
+ * @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
|
|
|
+ * @property {String | Number} press-time 开启长按触发后,每触发一次需要多久,单位ms(默认250)
|
|
|
+ * @property {String | Number} cursor-spacing 指定光标于键盘的距离,避免键盘遮挡输入框,单位rpx(默认200)
|
|
|
+ * @event {Function} change 输入框内容发生变化时触发,对象形式
|
|
|
+ * @event {Function} blur 输入框失去焦点时触发,对象形式
|
|
|
+ * @event {Function} minus 点击减少按钮时触发(按钮可点击情况下),对象形式
|
|
|
+ * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下),对象形式
|
|
|
+ * @example <uni-number-box :min="1" :max="100"></uni-number-box>
|
|
|
*/
|
|
|
-
|
|
|
export default {
|
|
|
- name: "UniNumberBox",
|
|
|
- emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
|
|
|
+ name: "uni-number-box",
|
|
|
props: {
|
|
|
+ // 预显示的数字
|
|
|
value: {
|
|
|
- type: [Number, String],
|
|
|
+ type: Number,
|
|
|
default: 1
|
|
|
},
|
|
|
- modelValue: {
|
|
|
- type: [Number, String],
|
|
|
- default: 1
|
|
|
+ // 背景颜色
|
|
|
+ bgColor: {
|
|
|
+ type: String,
|
|
|
+ default: '#F2F3F5'
|
|
|
},
|
|
|
+ // 最小值
|
|
|
min: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
},
|
|
|
+ // 最大值
|
|
|
max: {
|
|
|
type: Number,
|
|
|
- default: 100
|
|
|
+ default: 99999
|
|
|
},
|
|
|
+ // 步进值,每次加或减的值
|
|
|
step: {
|
|
|
type: Number,
|
|
|
default: 1
|
|
|
},
|
|
|
- background: {
|
|
|
- type: String,
|
|
|
- default: '#f5f5f5'
|
|
|
+ // 是否禁用加减操作
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
},
|
|
|
+ // input的字体大小,单位rpx
|
|
|
+ size: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: 26
|
|
|
+ },
|
|
|
+ // 加减图标的颜色
|
|
|
color: {
|
|
|
type: String,
|
|
|
- default: '#333'
|
|
|
+ default: '#323233'
|
|
|
},
|
|
|
- disabled: {
|
|
|
+ // input宽度,单位rpx
|
|
|
+ inputWidth: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: 80
|
|
|
+ },
|
|
|
+ // input高度,单位rpx
|
|
|
+ inputHeight: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: 50
|
|
|
+ },
|
|
|
+ // index索引,用于列表中使用,让用户知道是哪个numberbox发生了变化,一般使用for循环出来的index值即可
|
|
|
+ index: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 是否禁用输入框,与disabled作用于输入框时,为OR的关系,即想要禁用输入框,又可以加减的话
|
|
|
+ // 设置disabled为false,disabledInput为true即可
|
|
|
+ disabledInput: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
- width: {
|
|
|
- type: Number,
|
|
|
- default: 40,
|
|
|
+ // 输入框于键盘之间的距离
|
|
|
+ cursorSpacing: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: 100
|
|
|
},
|
|
|
- height: {
|
|
|
- type: Number,
|
|
|
- default: 22
|
|
|
+ // 是否开启长按连续递增或递减
|
|
|
+ longPress: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ // 开启长按触发后,每触发一次需要多久
|
|
|
+ pressTime: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: 250
|
|
|
+ },
|
|
|
+ // 是否只能输入大于或等于0的整数(正整数)
|
|
|
+ positiveInteger: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
}
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- inputValue: 0
|
|
|
- };
|
|
|
- },
|
|
|
watch: {
|
|
|
- value(val) {
|
|
|
- this.inputValue = +val;
|
|
|
+ value(v1, v2) {
|
|
|
+ // 只有value的改变是来自外部的时候,才去同步inputVal的值,否则会造成循环错误
|
|
|
+ if(!this.changeFromInner) {
|
|
|
+ this.inputVal = v1;
|
|
|
+ // 因为inputVal变化后,会触发this.handleChange(),在其中changeFromInner会再次被设置为true,
|
|
|
+ // 造成外面修改值,也导致被认为是内部修改的混乱,这里进行this.$nextTick延时,保证在运行周期的最后处
|
|
|
+ // 将changeFromInner设置为false
|
|
|
+ this.$nextTick(function(){
|
|
|
+ this.changeFromInner = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
- modelValue(val) {
|
|
|
- this.inputValue = +val;
|
|
|
+ inputVal(v1, v2) {
|
|
|
+ // 为了让用户能够删除所有输入值,重新输入内容,删除所有值后,内容为空字符串
|
|
|
+ if (v1 == '') return;
|
|
|
+ let value = 0;
|
|
|
+ // 首先判断是否数值,并且在min和max之间,如果不是,使用原来值
|
|
|
+ let tmp = this.$u.test.number(v1);
|
|
|
+ if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
|
|
|
+ else value = v2;
|
|
|
+ // 判断是否只能输入大于等于0的整数
|
|
|
+ if(this.positiveInteger) {
|
|
|
+ // 小于0,或者带有小数点,
|
|
|
+ if(v1 < 0 || String(v1).indexOf('.') !== -1) {
|
|
|
+ value = v2;
|
|
|
+ // 双向绑定input的值,必须要使用$nextTick修改显示的值
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.inputVal = v2;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 发出change事件
|
|
|
+ this.handleChange(value, 'change');
|
|
|
}
|
|
|
},
|
|
|
- computed: {
|
|
|
- widthWithPx() {
|
|
|
- return this.width + 'px';
|
|
|
- },
|
|
|
- heightPx(){
|
|
|
- return this.height + 'px'
|
|
|
- }
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ inputVal: 1, // 输入框中的值,不能直接使用props中的value,因为应该改变props的状态
|
|
|
+ timer: null, // 用作长按的定时器
|
|
|
+ changeFromInner: false, // 值发生变化,是来自内部还是外部
|
|
|
+ innerChangeTimer: null, // 内部定时器
|
|
|
+ };
|
|
|
},
|
|
|
created() {
|
|
|
- if (this.value === 1) {
|
|
|
- this.inputValue = +this.modelValue;
|
|
|
- }
|
|
|
- if (this.modelValue === 1) {
|
|
|
- this.inputValue = +this.value;
|
|
|
+ this.inputVal = Number(this.value);
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getCursorSpacing() {
|
|
|
+ // 先将值转为px单位,再转为数值
|
|
|
+ return Number(uni.upx2px(this.cursorSpacing));
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- _calcValue(type) {
|
|
|
- if (this.disabled) {
|
|
|
- return;
|
|
|
+ // 点击退格键
|
|
|
+ btnTouchStart(callback) {
|
|
|
+ // 先执行一遍方法,否则会造成松开手时,就执行了clearTimer,导致无法实现功能
|
|
|
+ this[callback]();
|
|
|
+ // 如果没开启长按功能,直接返回
|
|
|
+ if (!this.longPress) return;
|
|
|
+ clearInterval(this.timer); //再次清空定时器,防止重复注册定时器
|
|
|
+ this.timer = null;
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ // 执行加或减函数
|
|
|
+ this[callback]();
|
|
|
+ }, this.pressTime);
|
|
|
+ },
|
|
|
+ clearTimer() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ minus() {
|
|
|
+ this.computeVal('minus');
|
|
|
+ },
|
|
|
+ plus() {
|
|
|
+ this.computeVal('plus');
|
|
|
+ },
|
|
|
+ // 为了保证小数相加减出现精度溢出的问题
|
|
|
+ calcPlus(num1, num2) {
|
|
|
+ let baseNum, baseNum1, baseNum2;
|
|
|
+ try {
|
|
|
+ baseNum1 = num1.toString().split('.')[1].length;
|
|
|
+ } catch (e) {
|
|
|
+ baseNum1 = 0;
|
|
|
}
|
|
|
- const scale = this._getDecimalScale();
|
|
|
- let value = this.inputValue * scale;
|
|
|
- let step = this.step * scale;
|
|
|
- if (type === "minus") {
|
|
|
- value -= step;
|
|
|
- if (value < (this.min * scale)) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (value > (this.max * scale)) {
|
|
|
- value = this.max * scale
|
|
|
- }
|
|
|
+ try {
|
|
|
+ baseNum2 = num2.toString().split('.')[1].length;
|
|
|
+ } catch (e) {
|
|
|
+ baseNum2 = 0;
|
|
|
}
|
|
|
-
|
|
|
- if (type === "plus") {
|
|
|
- value += step;
|
|
|
- if (value > (this.max * scale)) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (value < (this.min * scale)) {
|
|
|
- value = this.min * scale
|
|
|
- }
|
|
|
+ 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, baseNum1, baseNum2;
|
|
|
+ try {
|
|
|
+ baseNum1 = num1.toString().split('.')[1].length;
|
|
|
+ } catch (e) {
|
|
|
+ baseNum1 = 0;
|
|
|
}
|
|
|
-
|
|
|
- this.inputValue = (value / scale).toFixed(String(scale).length - 1);
|
|
|
- // TODO vue2 兼容
|
|
|
- this.$emit("input", +this.inputValue);
|
|
|
- // TODO vue3 兼容
|
|
|
- this.$emit("update:modelValue", +this.inputValue);
|
|
|
- this.$emit("change", +this.inputValue);
|
|
|
- },
|
|
|
- _getDecimalScale() {
|
|
|
- let scale = 1;
|
|
|
- // 浮点型
|
|
|
- if (~~this.step !== this.step) {
|
|
|
- scale = Math.pow(10, String(this.step).split(".")[1].length);
|
|
|
+ try {
|
|
|
+ baseNum2 = num2.toString().split('.')[1].length;
|
|
|
+ } catch (e) {
|
|
|
+ baseNum2 = 0;
|
|
|
}
|
|
|
- return scale;
|
|
|
+ baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
|
|
|
+ let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
|
|
|
+ return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
|
|
|
},
|
|
|
- _onBlur(event) {
|
|
|
- this.$emit('blur', event)
|
|
|
- let value = event.detail.value;
|
|
|
- if (isNaN(value)) {
|
|
|
- this.inputValue = this.value;
|
|
|
+ computeVal(type) {
|
|
|
+ uni.hideKeyboard();
|
|
|
+ if (this.disabled) return;
|
|
|
+ let value = 0;
|
|
|
+ // 减
|
|
|
+ if (type === 'minus') {
|
|
|
+ value = this.calcMinus(this.inputVal, this.step);
|
|
|
+ } else if (type === 'plus') {
|
|
|
+ value = this.calcPlus(this.inputVal, this.step);
|
|
|
+ }
|
|
|
+ // 判断是否小于最小值和大于最大值
|
|
|
+ if (value < this.min || value > this.max) {
|
|
|
return;
|
|
|
}
|
|
|
- value = +value;
|
|
|
- if (value > this.max) {
|
|
|
- value = this.max;
|
|
|
- } else if (value < this.min) {
|
|
|
- value = this.min;
|
|
|
+ this.inputVal = value;
|
|
|
+ this.handleChange(value, type);
|
|
|
+ },
|
|
|
+ // 处理用户手动输入的情况
|
|
|
+ onBlur(event) {
|
|
|
+ let val = 0;
|
|
|
+ let value = event.detail.value;
|
|
|
+ // 如果为非0-9数字组成,或者其第一位数值为0,直接让其等于min值
|
|
|
+ // 这里不直接判断是否正整数,是因为用户传递的props min值可能为0
|
|
|
+ if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
|
|
|
+ val = +value;
|
|
|
+ if (val > this.max) {
|
|
|
+ val = this.max;
|
|
|
+ } else if (val < this.min) {
|
|
|
+ val = this.min;
|
|
|
}
|
|
|
- const scale = this._getDecimalScale();
|
|
|
- this.inputValue = value.toFixed(String(scale).length - 1);
|
|
|
- this.$emit("input", +this.inputValue);
|
|
|
- this.$emit("update:modelValue", +this.inputValue);
|
|
|
- this.$emit("change", +this.inputValue);
|
|
|
- },
|
|
|
- _onFocus(event) {
|
|
|
- this.$emit('focus', event)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.inputVal = val;
|
|
|
+ })
|
|
|
+ this.handleChange(val, 'blur');
|
|
|
+ },
|
|
|
+ // 输入框获得焦点事件
|
|
|
+ onFocus() {
|
|
|
+ this.$emit('focus');
|
|
|
+ },
|
|
|
+ handleChange(value, type) {
|
|
|
+ if (this.disabled) return;
|
|
|
+ // 清除定时器,避免造成混乱
|
|
|
+ if(this.innerChangeTimer) {
|
|
|
+ clearTimeout(this.innerChangeTimer);
|
|
|
+ this.innerChangeTimer = null;
|
|
|
+ }
|
|
|
+ // 发出input事件,修改通过v-model绑定的值,达到双向绑定的效果
|
|
|
+ this.changeFromInner = true;
|
|
|
+ // 一定时间内,清除changeFromInner标记,否则内部值改变后
|
|
|
+ // 外部通过程序修改value值,将会无效
|
|
|
+ this.innerChangeTimer = setTimeout(() => {
|
|
|
+ this.changeFromInner = false;
|
|
|
+ }, 150);
|
|
|
+ this.$emit('input', Number(value));
|
|
|
+ this.$emit(type, {
|
|
|
+ // 转为Number类型
|
|
|
+ value: Number(value),
|
|
|
+ index: this.index
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="scss">
|
|
|
- $box-height: 22px;
|
|
|
- $bg: #066cff;
|
|
|
- $br: 2px;
|
|
|
- $color: #333;
|
|
|
|
|
|
- .uni-numbox {
|
|
|
- /* #ifndef APP-NVUE */
|
|
|
- display: flex;
|
|
|
- /* #endif */
|
|
|
- flex-direction: row;
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .u-numberbox {
|
|
|
+ display: inline-flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
- .uni-numbox-btns {
|
|
|
- /* #ifndef APP-NVUE */
|
|
|
+ .u-number-input {
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0 6rpx;
|
|
|
display: flex;
|
|
|
- /* #endif */
|
|
|
- width: $box-height;
|
|
|
- height: $box-height;
|
|
|
- flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- background-color: $bg;
|
|
|
- border-radius: 50px;
|
|
|
- /* #ifdef H5 */
|
|
|
- cursor: pointer;
|
|
|
- /* #endif */
|
|
|
}
|
|
|
|
|
|
- .uni-numbox__value {
|
|
|
- margin: 0 5px;
|
|
|
- background-color: $bg;
|
|
|
- width: 30px;
|
|
|
- height: $box-height;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- border-width: 0;
|
|
|
- color: $color;
|
|
|
+ .u-icon-plus,
|
|
|
+ .u-icon-minus {
|
|
|
+ width: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-icon-plus {
|
|
|
+ border-radius: 0 8rpx 8rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-icon-minus {
|
|
|
+ border-radius: 8rpx 0 0 8rpx;
|
|
|
}
|
|
|
|
|
|
- .uni-numbox--text {
|
|
|
- // fix nvue
|
|
|
- line-height: 20px;
|
|
|
- margin-bottom: 2px;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 300;
|
|
|
- color: #fff;
|
|
|
+ .u-icon-disabled {
|
|
|
+ color: #c8c9cc !important;
|
|
|
+ background: #f7f8fa !important;
|
|
|
}
|
|
|
|
|
|
- .uni-numbox .uni-numbox--disabled {
|
|
|
- background-color: #c0c0c0 !important;
|
|
|
- /* #ifdef H5 */
|
|
|
- cursor: not-allowed;
|
|
|
- /* #endif */
|
|
|
+ .u-input-disabled {
|
|
|
+ color: #c8c9cc !important;
|
|
|
+ background-color: #f2f3f5 !important;
|
|
|
}
|
|
|
</style>
|