vue之自定义指令

[zhaobinglong]

全局导入指令

// 导入全局directives文件夹中所有自定义指令
const requireContext = require.context('./directives', false, /\.js$/)
requireContext.keys().forEach(path => {
  const requireItem = requireContext(path).default
  console.log(requireItem)
  app.directive(requireItem.name, requireItem.instance)
})

指令文件夹中的指令编写

// 文字高亮指令
export default {
  name: 'highlight', // 指令名
  instance: {
    beforeMount (el, binding, vnode) {
      console.log(binding.value)
      el.style.color = binding.value
    }
  }
}

指令的本质

在指令中操作dom元素，数据驱动视图的补充手段

限制只能输入数字（数字和小数点）

// 使用 <input v-omly-enter-num>
Vue.directive('onlyEnterNum', {
  // el就是添加本指令的dom
  inserted: function (el) {
    el.addEventListener("keypress",function(e){
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if(charcode == 46){
        if(el.value.includes('.')){
          e.preventDefault();
        }
        return;
      }else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
        if(e.preventDefault){
          e.preventDefault();
        }else{
            e.returnValue = false;
        }
      }
    });
  }
});

限制只能输入数字（整数）

// 使用 <input v-omly-enter-num>
Vue.directive('onlyEnterNum', {
  // el就是添加本指令的dom
  inserted: function (el) {
    el.addEventListener("keypress",function(e){
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if(charcode == 46){
        if(el.value.includes('.')){
          e.preventDefault();
        }
        return;
      }else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
        if(e.preventDefault){
          e.preventDefault();
        }else{
            e.returnValue = false;
        }
      }
    });
  }
});

自定义loading指令

[zhaobinglong]

性能优化v-once

[zhaobinglong]

长按指令v-longpress

[zhaobinglong]

按下回车光标自动跳转下一个输入框

// 自定义指令，实现按下enter后，光标自动跳转下一个输入框
Vue.directive('enterNextInput', {
  inserted: function (el) {
    el.addEventListener("keypress",function(e){
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      console.log(charcode)
      if(charcode == 13){
        var dom = document.getElementsByTagName("input")
        for (var i = 0; i < dom.length; i++) {
          if (dom[i] == document.activeElement) {
            if (i==dom.length) {
              return
            }
            dom[i+1].focus()
            return
          } 
        }
      }
    });
  }
});

[zhaobinglong]

内容复制指令

V-Clipboard 仓库地址: https://github.com/euvl/v-clipboard 安装: npm install --save v-clipboard

这个简单指令的作者是Yev Vlasenko ，可以用在任何静态或动态元素上。当元素被点击时，指令的值会被复制到剪贴板上。用户需要复制代码片段的时候，这个非常有用。

Copy to clipboard

[zhaobinglong]

防止按钮重复点击指定

// 自定义指令：防重复点击
// 调用方式：v-resetClick || v-resetClick="2000"
Vue.directive('resetClick', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 1000)
      }
    })
  }
})

参考

https://blog.csdn.net/weixin_41628411/article/details/105728550