vue自定义指令，如何在element-ui组件上使用。

需求是对input内容进行校验，不能输入负数及中文。element上组件的方法不太严谨，就自定义了一个指令。

main.js文件中写人方法

Vue.directive('numberOnly', {
  // 当被绑定的元素插入到 DOM 中时……
  bind: function (el) {
    el.handler = function () {
    // 在el-input上绑定指令，绑定是input的父级，所以需要根据dom获取子元素进行校验。
      let val = el.getElementsByTagName('input')[0]
      ///[^\.\d]/g  输入数字或小数点的正则
      val.value = Number(val.value.replace(/[^\.\d]/g, ''))
    }
    el.addEventListener('input', el.handler)
  },
  unbind: function (el) {
    el.removeEventListener('input', el.handler)
  }
})

vue文件中使用

<el-input
      v-numberOnly="fromData.nums"
      v-model="fromData.nums"
      type="Number"
      class="num"
      >
</el-input>

本来想要使用clickoutside，搞了半天数据变了，页面却没变化，不知道什么原因，回头有时间再仔细研究下…