这里分享一个工作中 一个写的一个正整数input输入框

业务场景：新建的模具修改单，里面需要填写模具的变更寿命，因此需要写正整数。

说组件前，先分享一下自定义组件的 v-model，因为在要分享的组件里面就用到了自定义组件的v-model。

为啥要用自定义组件的v-model，因为默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突。

直接复制官方的代码示例吧

其实v-model这个是一个语法糖。这个具体是什么意思，自行百度。

下面介绍自定义组件

先看html代码

在input标签上面绑定了一个val属性值，这个属性值是根据父组件传递进来的value去赋值的。还绑定了一个handleChange的方法，当input值改变时就会触发这方法

再看script

这里面有3个属性是从父组件传递过来的值，一个是值的多少：value，定义类型为字符串和数字；一个是最大值：max，定义类型为数字；一个是最小值：min，定义类型为数字。还有定义了一个handleChange的方法，方法用途是把值取整，简单说下this.$emit('input)这个事件就上面所说到自定义组件的v-model用法

在看看在父组件里面是怎么使用的，通过import导入intInput。

在父组件的components里面加入intInput就好了。

那现在拿到intInput组件和配置好了，那该怎么使用呢？其实很简单，只需要在html里面加入<intInput></intInput>一对标签就好了，在这里要提醒一点就是标签最好根据驼峰的规则，要写成<int-input></int-input>。下面就是直接在父组件里面的写法，传入最大最小值，传入绑定的值。

这样就完成了一个很简单的小组件

下面补充一个输入数字的只能为多少位的input代码，也是因为业务需要。规定只要2位小数，所以又多写了一个组件

html代码有点修改，增加了disabled的属性，样式也借用了饿了么UI

再看script(参数就多了一个浮点的长度：floatLength来控制多少位小数，默认是两位小数)

这里的方法也基本没什么改变，只是里面的小数点逻辑变了而已

哈，最后觉得这个对你有用的话，给我点个赞，当做支持吧，谢谢