vue组件-正整数输入框,多位小数输入框(追加)

96
雨季web
2018.04.02 19:08* 字数 735

这里分享一个工作中 一个写的一个正整数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来控制多少位小数,默认是两位小数)

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

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

日记本
Web note ad 1