vue自定义指令实现仅支持输入数字和浮点型的示例

// 只能输入整数
onlyNum (el,binding,vnode) {
  let ele = el.tagName === 'INPUT' "only-num"
   })[0]
   vnode.context.$nextTick(()=>{
    handleInput(ele,vnode,rel)
   })
  }
}

/**
 * [handleInput 在输入阶段的处理逻辑]
 * @param {[DOM]} ele  [当前指令操作的dom对象]
 * @param {[虚拟节点]} vnode [当前指令渲染的虚拟节点]
 * @param {[指令信息]} rel  [当前指令的所有指令信息]
 * @param {[校验类型]} type [输入阶段的校验类型]
 *   "number": 仅支持输入数字
 *   "float": 仅支持数字和小数点
 */
function handleInput(ele,vnode,rel){
 let rule;
 switch(true) {
  case rel.modifiers.float: // 浮点型
   rule = /[^\d\.]/g; break;
  default: //默认仅支持输入数字
   rule = /\D/g;
 }
 let val = ele.value.replace(rule,"");
 let maxLen = vnode.data.attrs && vnode.data.attrs['max-len'] "htmlcode">

/**
 * [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.toString) "color: #ff0000">如何使用

基于以上实现的指令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自定义指令实现仅支持输入数字和浮点型的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。