在使用Vant组件 van-field时需要限制数值类型的最大值,尝试了两种方法,最终确定了一种最优方案
版本说明 "vue": "^2.6.8" "vant": "^2.9.0"
因为在组件van-field外面有嵌套了一层作为自定义组件,方便写一些公共的业务逻辑,就是因为嵌套了一层才导致我最初使用的方法有性能问题和不能准确限制最大值的问题
而且使用的是数字,所以设置type='digit' Tips: digit 类型从 2.4.2 版本开始支持
我们先来看第一种方法
事件传递法
取这个名字的原因是因为所有都是通过事件来完成的,并且是连续的事件。
定义自定义组件
c-input
label=""
:value="value"
type="digit"
@input="inputHandler"
/>
export default {
name: 'c-input',
props: {
value: {
default: '',
type: [Number, String],
},
max: {
default: 0,
type: [Number, String],
},
},
methods: {
inputH