封装自定义指令（错误时显示默认图片，设置权限按钮，防抖按钮，自动聚焦input输入框）

www.cnblogs.com/lzq035/p/14…

//我们在src下创建 directives文件夹/index.js，在这里写以下代码
//引入 src/assets/下载的默认图片
import defaultImg from '@/assets/common/head.jpg'

//登录时将该用户拥有的权限对应的权限按钮名存储到Vuex中，先导入后通过store.state取值
import store from '@/store'

//然后将directives导出到main.js，如下图
 Snipaste_2023-02-12_12-24-47.png(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36e29a3d539548f78c67a576bb938944~tplv-k3u1fbpfcp-watermark.image?)


//指令1：错误时显示默认图片
export const imgerror = {
  inserted(el) {
    el.onerror = function () {
      this.src = defaultImg
    }
  },
}
使用方法： 微信截图_20230212122214.png(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57ecd769830947f9a1c82ab344ae3a0d~tplv-k3u1fbpfcp-watermark.image?)



//指令2：自动聚焦input输入框
export const focus = {
  inserted(el) {
    el.focus()
  },
}
使用方法：同理



//指令3：设置权限按钮
export const permission = {
  inserted(el, binding) {
    //因为我们在登录时将用户对应的权限按钮名存储到了Vuex中，所以在这直接从Vuex中获取
    const points = store.state.user.userInfo.roles.points
    if (!points.includes(binding.value)) {
      el.style.display = 'none'
    }
  },
}
使用方法： 权限按钮.png(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/821c2dc650f14f79a3e11d9a19a2034d~tplv-k3u1fbpfcp-watermark.image?)



//指令4：防抖按钮
export const debounce = {
  inserted(el, binding) {
    let timer
    //每次点击都清除，都是最新的一次点击，当不持续点击的时，过500半秒后执行。
    el.addEventListener('click', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 500)
    })
  },
}
使用方法： 防抖按钮.png(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e6db6f531084ff7bea0e52334eb09b7~tplv-k3u1fbpfcp-watermark.image?)
]()```


export const longpress = {
  bind: function (el, binding, vNode) {
    if (typeof binding.value !== "function") {
      throw "callback must be a function";
    }
    // 定义变量
    let pressTimer = null;
    // 创建计时器（ 2秒后执行函数 ）
    let start = (e) => {
      if (e.type === "click" && e.button !== 0) {
        return;
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler();
        }, 2000);
      }
    };
    // 取消计时器
    let cancel = (e) => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer);
        pressTimer = null;
      }
    };
    // 运行函数
    const handler = (e) => {
      binding.value(e);
    };
    // 添加事件监听器
    el.addEventListener("mousedown", start);
    el.addEventListener("touchstart", start);
    // 取消计时器
    el.addEventListener("click", cancel);
    el.addEventListener("mouseout", cancel);
    el.addEventListener("touchend", cancel);
    el.addEventListener("touchcancel", cancel);
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener("click", el.handler);
  }
};
使用方法
 <div style="width: 200px; height: 200px; background-color: yellowgreen" v-longpress="longpress">2</div>
   methods: {
    longpress() {
      alert("长按指令生效");
    }
  }