|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<view class="number-box">
|
|
<view class="number-box">
|
|
<view class="sub" @click="onSub" :class="{ disabled: subDisabled }"></view>
|
|
<view class="sub" @click="onSub" :class="{ disabled: subDisabled }"></view>
|
|
- <input type="number" class="control-input" v-model="inputValue" @blur="onBlur" />
|
|
|
|
|
|
+ <input type="number" class="control-input" :value="value" @input="onInput" />
|
|
<view class="add" @click="onAdd" :class="{ disabled: addDisabled }"></view>
|
|
<view class="add" @click="onAdd" :class="{ disabled: addDisabled }"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
@@ -23,51 +23,60 @@ export default {
|
|
},
|
|
},
|
|
value: {
|
|
value: {
|
|
type: Number,
|
|
type: Number,
|
|
- default: 0
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- inputValue: ''
|
|
|
|
|
|
+ default: 1
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
addDisabled() {
|
|
addDisabled() {
|
|
- return this.inputValue === this.max
|
|
|
|
|
|
+ return this.value === this.max
|
|
},
|
|
},
|
|
subDisabled() {
|
|
subDisabled() {
|
|
- return this.inputValue === this.min
|
|
|
|
|
|
+ return this.value === this.min
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
- inputValue(nVal) {
|
|
|
|
- this.$emit('input', parseInt(this.inputValue))
|
|
|
|
|
|
+ value(nval) {
|
|
|
|
+ console.log(nval)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- created() {
|
|
|
|
- this.inputValue = this.value
|
|
|
|
- },
|
|
|
|
methods: {
|
|
methods: {
|
|
- onBlur() {
|
|
|
|
- if (this.inputValue < this.min) this.inputValue = this.min
|
|
|
|
- if (this.inputValue > this.max) this.inputValue = this.max
|
|
|
|
- this.$emit('change', this.inputValue)
|
|
|
|
- },
|
|
|
|
// 减法
|
|
// 减法
|
|
onSub() {
|
|
onSub() {
|
|
- if (this.inputValue <= this.min) {
|
|
|
|
- return
|
|
|
|
|
|
+ if (this.subDisabled) return
|
|
|
|
+ let inputValue = this.value
|
|
|
|
+ if (inputValue <= this.min) {
|
|
|
|
+ inputValue = this.min
|
|
|
|
+ } else {
|
|
|
|
+ inputValue--
|
|
}
|
|
}
|
|
- this.inputValue--
|
|
|
|
- this.$emit('change', this.inputValue)
|
|
|
|
|
|
+ this.$emit('input', inputValue)
|
|
|
|
+ this.$emit('change', inputValue)
|
|
},
|
|
},
|
|
// 加法
|
|
// 加法
|
|
onAdd() {
|
|
onAdd() {
|
|
- if (this.inputValue >= this.max) {
|
|
|
|
- return
|
|
|
|
|
|
+ if (this.addDisabled) return
|
|
|
|
+ let inputValue = this.value
|
|
|
|
+ if (inputValue >= this.max) {
|
|
|
|
+ inputValue = this.max
|
|
|
|
+ } else {
|
|
|
|
+ inputValue++
|
|
|
|
+ }
|
|
|
|
+ this.$emit('input', inputValue)
|
|
|
|
+ this.$emit('change', inputValue)
|
|
|
|
+ },
|
|
|
|
+ // 失去焦点
|
|
|
|
+ onInput(e) {
|
|
|
|
+ let inputValue = parseInt(e.detail.value)
|
|
|
|
+ if (isNaN(inputValue)) {
|
|
|
|
+ inputValue = this.min
|
|
|
|
+ }
|
|
|
|
+ if (inputValue < this.min) {
|
|
|
|
+ inputValue = this.min
|
|
|
|
+ } else if (inputValue > this.max) {
|
|
|
|
+ inputValue = this.max
|
|
}
|
|
}
|
|
- this.inputValue++
|
|
|
|
- this.$emit('change', this.inputValue)
|
|
|
|
|
|
+ this.$emit('input', inputValue)
|
|
|
|
+ this.$emit('change', inputValue)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|