数字限度
有一个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) } })