uniapp 输入框限制数字最大值

uniapp yekong

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>

喜欢