本文共 1511 字，大约阅读时间需要 5 分钟。

使用自定义指令背景

1. 代码复用和抽象的主要形式是组件。
2. 当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令
3. 但是，对于大幅度的 DOM 变动，还是应该使用组件

常用案例

1、 输入框自动聚焦

// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {
     // 当被绑定的元素插入到 DOM 中时  inserted: function (el) {
       // 聚焦元素    el.focus()  }})123456789

2 下拉菜单

点击下拉菜单本身不会隐藏菜单

Vue.directive('clickoutside', {
     bind(el, binding) {
       function documentHandler(e) {
         if (el.contains(e.target)) {
          return false       }            if (binding.expression) {
           binding.value(e)      }    }        el.__vueMenuHandler__ = documentHandler    document.addEventListener('click', el.__vueMenuHandler__)  },  unbind(el) {
       document.removeEventListener('click', el.__vueMenuHandler__)    delete el.__vueMenuHandler__  }})new Vue({
     el: '#app',  data: {
       show: false  },  methods: {
       handleHide() {
         this.show = false    }  }})
   
  
    点击显示下拉菜单  
    
    
     
      选项 1
     
    
     
      选项 2
     
    
     
      选项 3
     
  
    
   
12345678910111213141516171819202122232425262728293031323334353637383940

3. 相对时间转换

类似微博、朋友圈发布动态后的相对时间，比如刚刚、两分钟前等等

new Vue({
     el: '#app',  data: {
       time: 1565753400000  }})Vue.directive('relativeTime', {
     bind(el, binding) {
       // Time.getFormatTime() 方法，自行补充    el.innerHTML = Time.getFormatTime(binding.value)    el.__timeout__ = setInterval(() => {
         el.innerHTML = Time.getFormatTime(binding.value)    }, 6000)  },  unbind(el) {
       clearInterval(el.innerHTML)    delete el.__timeout__  }})

转载地址：https://blog.csdn.net/weixin_58102387/article/details/122915915 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！