自定义指令

v-number:n 指令 输入数字并截取小数点后 n 位数

1. 组件内

2. 创建 js 文件 directive.js

   import Vue from 'vue'
   
   /**
    * el：添加指令的组件，如果使用 element 之类的 UI 需要获取需要的元素
    * element：const element = el.getElementsByTagName('input')[0] 
    * binding：指令对象
    * vnode：vue node 
    */
   
   Vue.directive('numberInt', {
       bind: (el, binding, vnode) => {
           const len = binding.arg; // 获取 : 后面的值，用来截取长度
           el.value = Number(el.value).toFixed(len); // 失去焦点时格式化
           el.addEventListener("blur", () => {
               // 如果值为 nan，需要重置参数
               if (isNaN(el.value)) el.value = 0;
               el.value = Number(el.value).toFixed(len);
               uodateVal(el, binding, vnode);
           });
           // 聚焦时的处理
           el.addEventListener('focus', () => {
               if (el.value == 0) {
                   el.value = '';
                   uodateVal(el, binding, vnode);
               }
           })
       },
       // v-model 值发生改变时，会触发此方法
       update: (el, binding, vnode) => {
           uodateVal(el, binding, vnode);
       }
   })
   
   function uodateVal(el, binding, vnode) {
       const modelDirective = vnode.data.directives.find((directive) => directive.name === 'model');
       // 判断是否有 .lazy，没有则触发 input 事件，如果有，则触发 change 事件；通过这两个事件更新值
       if (modelDirective) modelDirective.modifiers.lazy ? el.dispatchEvent(new Event('change')) : el.dispatchEvent(new Event('input'));
   }
   

3. main.js 中引入 directive.js，引入即可使用

v-copy 复制文字指令

1. 组件内

     
   onErr() {
     console.log(45646465);
   },
   onSuccess() {
     console.log(66666666);
   },
   

2. js

   Vue.directive('copy', {
       bind(el, binding) {
           el.result = false;
           if (binding.arg == 'err') el.funE = binding.value;
           if (binding.arg == 'success') el.funS = binding.value;
           if (binding.arg == 'copy') el.$value = binding.value;
   
           el.handler = () => {
                   if (typeof binding.value != 'function' && (!el.$value || el.$value == '')) {
                       // 值为空的时候，给出提示。可根据项目UI仔细设计
                       console.log('无复制内容')
                       el.funE();
                       el.err = true;
                       return
                   } else {
                       if (binding.arg == 'copy') {
                           // 动态创建 textarea 标签
                           const textarea = document.createElement('textarea')
                               // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
                           textarea.readOnly = 'readonly'
                           textarea.style.position = 'absolute'
                           textarea.style.left = '-9999px'
                               // 将要 copy 的值赋给 textarea 标签的 value 属性
                           textarea.value = el.$value
                               // 将 textarea 插入到 body 中
                           document.body.appendChild(textarea)
                               // 选中值并复制
                           textarea.select()
                           el.result = document.execCommand('Copy')
                           document.body.removeChild(textarea)
                       } else {
                           if (el.result && !el.success && typeof el.funS == 'function') {
                               el.funS();
                               el.success = true;
                           }
                           if (!el.result && !el.err && typeof el.funE == 'function') {
                               el.funE();
                               el.err = true;
                           }
                       }
                   }
   
               }
               // 绑定点击事件，就是所谓的一键 copy 啦
           el.addEventListener('click', el.handler)
       },
       update(el, binding) {
           if (binding.arg == 'copy') {
               el.$value = binding.value;
               el.err = false;
               el.success = false;
               el.result = false;
           }
       },
       unbind(el) { el.removeEventListener('click', el.handler) }
   })