<template> <view class="uni-numbox"> <view @click="_calcValue('minus')" class="uni-numbox__minus"> <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text> </view> <input :disabled="disabled" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" /> <view @click="_calcValue('plus')" class="uni-numbox__plus"> <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text> </view> </view> </template> <script> export default { name: "UniNumbersBox", props: { index:{ type: String, default: '' }, value: { type: [Number, String], default: 1 }, min: { type: Number, default: 0 }, max: { type: Number, default: 100 }, step: { type: Number, default: 1 }, disabled: { type: Boolean, default: false } }, data() { return { inputValue: this.value }; }, watch: { value(newVal,oldVal) { console.log(newVal,oldVal,'000') this.inputValue = +newVal; }, inputValue(newVal, oldVal) { if (+newVal !== +oldVal && this.max >= +newVal && this.min <= +newVal) { this.$emit("change", newVal, this.index); } } }, created() { this.inputValue = +this.value; }, methods: { _calcValue(type) { if (this.disabled) { return; } const scale = this._getDecimalScale(); let value = this.inputValue * scale; let step = this.step * scale; if (type === "minus") { value -= step; if (value < this.min) { return; } if(value > this.max){ value = this.max } } else if (type === "plus") { value += step; if (value > this.max) { return; } if(value < this.min){ value = this.min } } this.inputValue = String(value / scale); this.$emit('input',this.inputValue) }, _getDecimalScale() { let scale = 1; // 浮点型 if (~~this.step !== this.step) { scale = Math.pow(10, (this.step + "").split(".")[1].length); } return scale; }, _onBlur(event) { let value = event.detail.value; if (!value) { this.inputValue = this.min; } value = +value; if (value > this.max) { value = this.max; } else if (value < this.min) { value = this.min; } this.inputValue = value; this.$emit('input',this.inputValue) }, } }; </script> <style lang="scss" scoped> $box-height: 30px; /* #ifdef APP-NVUE */ $box-line-height: 30px; /* #endif */ $box-line-height: 26px; $box-width: 30px; .uni-numbox { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; width: 120px; } .uni-numbox__value { background-color: $uni-bg-color; width: 40px; height: $box-height; line-height: $box-height; text-align: center; font-size: $uni-font-size-lg; margin: 0 10px; } .uni-numbox__minus { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; align-items: center; justify-content: center; width: $box-width; height: $box-height; line-height: $box-height; font-size: 20px; color: $uni-text-color; background-color: $uni-bg-color-grey; border-radius: $box-width; } .uni-numbox__plus { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; align-items: center; justify-content: center; width: $box-width; height: $box-height; line-height: $box-height; background-color: $uni-bg-color-grey; border-radius: $box-width; } .uni-numbox--text { font-size: 36rpx; color: $uni-text-color; } .uni-numbox--disabled { color: $uni-text-color-disable; } </style>