vue利用directives 输入框el-input添加自定义指令限制只能输入数字

vue+element 输入框el-input添加自定义指令限制只能输入数字

import Vue from 'vue';
// 限制input框只能输入数字
Vue.directive('inputNumber',
  function (el, binding, vnode, oldVnode) {
    let _v = eval(`vnode.context.${vnode.data.model.expression}`)
    if (!_v) return
    if (isNaN(Number(_v))) {
      prompt(el.parentNode, el)
      eval(`vnode.context.${vnode.data.model.expression}=0`)
      setTimeout(()=>{
        _remove(el.parentNode)
      },2000)
    }else{
      _remove(el.parentNode)
    }
  }
)
// 在el-inpue节点的父节点添加一个span节点 提示语
function prompt(pN, tagN) {
  pN.style.position = 'relative'
  let spanNode = document.createElement("span")
  let t = document.createTextNode("输入框只能输入数字!")
  spanNode.appendChild(t)
  spanNode.style = `position:absolute;top:${pN.clientHeight}px;left:0;padding-top:2px;color:#F56C6C;font-size:12px`
  spanNode.setAttribute('id', 'prompt_number')
  pN.insertBefore(spanNode, tagN)
}
// 判断节点是否存在 删除节点
function remove(pN) {
  if(!pN) return
  let child = pN.firstElementChild;
  while (child) {
    if (child.getAttribute('id') == 'prompt_number') {
      pN.removeChild(child)
      child = pN.lastElementChild
    } else {
      child = child.nextElementSibling;
    }
  }
}
function _remove(){
  let n = document.getElementById('prompt_number')
  if(n){
    n.remove()
  }
}

<el-input v-model="searchForm.a" v-inputNumber placeholder="请输入"></el-input>