uniapp 微信小程序项目开发时,要求输入框的数字不能超过指定值。这就需要做一下限制了。
使用组件
<inputFilterMax :max="data.MaxWeight - data.TareWeight" :value.sync='data.CarLoad'></inputFilterMax>
组件代码
/**
* @Author: 858834013@qq.com
* @Name: inputFilterMax
* @Date: 2022-07-28
* @Desc: 输入框过滤器 限制数字最大
*/
<template>
<input class="number" @input="replaceInput" @confirm="replaceInput" v-model="value2" type="number" placeholder="请填写"
placeholder-style="font-size:32rpx;color: #D5D5E0;" />
</template>
<script>
export default {
data() {
return {
value2: ''
}
},
props: {
value: {
type: Number,
default () {
return 0;
}
},
max: {
type: Number,
default () {
return 0;
}
},
},
watch: {
value2() {
this.getInput()
},
value() {
this.value2 = this.value
},
},
mounted() {
this.value2 = this.value
},
methods: {
replaceInput: function(event) {
var that = this;
setTimeout(() => {
that.$emit("update:value", this.getMax(event.target.value));
that.value2 = this.getMax(event.target.value)
}, 10)
},
getMax(e) {
var num = e;
if (e > this.max) {
num = this.max
}
return num
},
getInput() {
var that = this;
setTimeout(() => {
that.$emit("update:value", this.getMax(that.value2));
}, 10)
}
}
}
</script>
<style scoped lang="scss">
.number {
width: 200rpx;
text-align: right;
}
</style>