数量限制有一个元素表单组件，现在希望只能输入数字。如果使用.number修饰符，则不能输入小数，所以使用vue的自定义指令来实现这样的功能；支持负数；使用方法v-num-rule="form"传递一个绑定的表单对象给自定义命令，在改变vNode时更方便方法importVuefrom'vue'functionrule(val,data){if(isNaN(data)){val=''}else{letindex=val.indexOf('.');if(index>0){val=val.slice(0,index+3)}}returnval}constnumRule=Vue.directive("numRule",{bind:(el,builing,vNode)=>{让形式=builing.expressionletkey=vNode.componentInstance.$parent.$options.propsData.prop;el.addEventListener('input',()=>{letval=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表单的标签有固定宽度，当它出现时显示省略号超出宽度，鼠标上移显示浮动框；如何使用方法constformTooltip=Vue.directive('formTooltip',{bind(el,binding,vnode,oldVnode){constlabel=el.querySelector('.el-form-item__label')varlabelText=label.innerText//el-form-item标签名称vartipContent=binding.value//v-form-tooltipvalueconstep=newVue({el:document.createElement('span'),template:`${labelText}/span>`})label.innerText=''label.appendChild(ep.$el)}})
