关于vue.js:vueelement-自定义指令数字限制及悬浮框

数字限度

有一个 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)
    }
  })