呔, 用了倆年vue 竟然沒(méi)怎么用過(guò)自定義指令, 面試問(wèn)到了就找個(gè)幾個(gè)常用的
實(shí)現(xiàn)按鈕權(quán)限的自定義指令 v-permission="code"

Vue.directive("permission", {
  inserted(el, binding) {
    let { value } = binding
    let res = roleList.some((it) => {
      return it && it == value
    })
    if (!res) {
      el.style.display = 'none'
    }
  }
})

<div style="width: 200px;">
   <el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容" v-focus v-permission="7"></el-input>
   <el-button type="info" v-permission="5">權(quán)限按鈕</el-button>
</div>

防止按鈕頻繁被點(diǎn)擊的自定義指令 v-preventReClick="time"

Vue.directive("preventReClick", {
      inserted(el, binding) {
          el.addEventListener("click", () => {
              if (!el.disabled) {
                  el.disabled = true;
                  setTimeout(() => {
                      el.disabled = false;
                  }, binding.value || 1000);
              }
          });
      }
  });

<el-button type="primary" v-preventReClick="5000" @click="test">主要按鈕</el-button>

input自動(dòng)聚焦的自定義指令 v-focus

Vue.directive('focus', {
    inserted: function (el,  binding) {
      let input = el.querySelector("input"); 
      input.focus()
    }
})

<el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容" v-focus ></el-input>

批量注冊(cè)自定義指令

import copy from './v-copy';
// 自定義指令
const directives = {
  copy,
};
// 這種寫(xiě)法可以批量注冊(cè)指令
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};