vue+element 自定义指令--数字限制及悬浮框

数字限制

有一个element的表单组件 现在希望只能输入数字，如果使用.number修饰符的话那么不能输入小数，所以自己使用vue的自定义指令实现一个这样的功能；支持录入负数；

使用方法

v-num-rule="form"给自定义指令传一个绑定的表单对象，这样更改vNode的时候比较方便

<el-form-item label='金额:' prop="je">
  <el-input v-num-rule="form" v-model="form.je" ></el-input>
</el-form-item>

方法

import Vue from 'vue'
function rule(val,data){
  if(isNaN(data)){
    val=''
 }else{
    let index = val.indexOf('.');
    if(index>0){
        val= val.slice(0,index+3)
    }
  }
  return val
}
const numRule = Vue.directive("numRule",  {
  bind: (el, builing, vNode) => {
    let form = builing.expression
 let key = vNode.componentInstance.$parent.$options.propsData.prop;
    el.addEventListener('input',()=>{
      let val = vNode.context[form][key];
      if(val[0]=='-'){
        vNode.context[form][key] = rule(val,val.slice(1,val.length))
      }else{
        vNode.context[form][key] = rule(val,val)
      }
    })
  }
});
export {numRule }

鼠标移上显示弹窗

项目中遇到一个需求，form表单的label固定宽度，超出显示省略号，鼠标移上显示悬浮框；

使用方法

  <el-form-item v-form-tooltip label='我是一个长文字:'>
    <el-input v-model="form.gfNsrsbh"></el-input>
  </el-form-item>

方法

const formTooltip =
  Vue.directive('formTooltip', {
    bind(el, binding, vnode, oldVnode) {
      const label = el.querySelector('.el-form-item__label')
      var labelText = label.innerText // el-form-item label 名称
 var tipContent = binding.value // v-form-tooltip 值
 const ep = new Vue({
        el: document.createElement('span'),
        template: `<el-popover
 content="${labelText}"
 popper-class="el-tooltip__popper" placement="top-start" :open-delay="500" trigger="hover"> <span slot="reference">${labelText}</span>
 </el-popover>` })
      label.innerText = ''
 label.appendChild(ep.$el)
    }
  })