/** * [setValueWithExpressionVue 更新数据模型] * @param {Boolean} toString [是否转化为字符串] * @param {[type]} currObj [当前的数据模型] * @param {[type]} expression [指令表达式] * @param {[type]} value [指令的值] * @param {[type]} key [用于批量渲染时的跟踪键] * @param {[type]} arg [指令的参数] */ function setValueWithExpressionVue (option) { let expression = option.expression.split('.') expression.forEach(function (item, i) { if (i < expression.length - 1) { option.currObj = option.currObj[item] } else { if(option.key !== undefined){ option.currObj[item][option.key][option.arg] = (option.value === "" || option.toString) ? option.value : option.value*1 }else{ option.currObj[item] = (option.value === "" || option.toString) ? option.value : option.value*1 } } }) }
我们知道，我们绑定的数据的层级可能为1级数据直接绑定，如：v-only-num=”age”，也有可能是多层级的，如：v-only-num=”obj.info.age”，也有可能是局部作用域的，如for循环渲染的数据：v-only-num=”item.age”……
‘i < expression.length - 1'是针对情景1做出的处理方案
‘option.key !== undefined'是针对情景3做出的处理方案，注意此时有个key。这个key很重要，是为了追踪for循环的渲染，从而在进行数据更新时，捕获你想要更新数据的那一项。
其余是针对情景2做出的处理方案
如何使用
基于以上实现的指令onlyNum，可以轻松实现以下情景的处理。
以element-ui文本框为例：
仅数字（如：输入09，会自动变成9）
<el-input v-only-num="info.age" v-model="info.age"></el-input>
仅数字，显示8位数以内（如：输入09，会自动变成9）
<el-input v-only-num="info.age" v-model="info.age" :max-len=”8”></el-input>
字符型数字（如：输入09，不会自动变成9）
<el-input v-only-num.string="info.tel" v-model="info.tel"></el-input>
浮点型数据(支持数字和小数点的混合输入)
<el-input v-only-num.float="info.tel" v-model="info.tel"></el-input>
Fro循环产生的局部作用域
Element -ui等第三方的局部作用域
注意事项
以上处理方案基于vue2.0及以上版本
在使用上述指令时，第三方的指令或者vue本省的指令修饰符不要使用，比如下边
<el-input v-model="param.productId" v-only-num.trim="param.productId"></el-input>
这会带出来一些意想不到的奇葩问题。因为指令的修饰符可以并列使用1至多个。除非你对vue的源码灰常熟悉。
指令使用时，尽量单一。指定的属性和配置要用到指定的场景，不要嵌套使用。否则发生问题了不好聚焦
以上这篇vue自定义指令实现仅支持输入数字和浮点型的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: