自定义指令防止多次触发

returnture

已于 2022-04-28 10:50:19 修改

阅读量1k

点赞数

文章标签： vue

于 2022-03-24 11:34:18 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62452941/article/details/123706865

版权

export default {
    install(Vue) {
      // 防止重复点击
      Vue.directive("preventReClick", {
        inserted(el, binding) {
          // console.log("binding-7", binding);
          el.addEventListener("click", () => {
            if (!el.disabled) {
              el.disabled = true;
              setTimeout(() => {
                el.disabled = false;
              }, binding.value || 1000);
            }
          });
        },
      });
    },
  };

并在 main.js 注册

import preventReClick from "./utils/preventReClick"

Vue.use(preventReClick)

在标签上使用

<el-button type="text" v-preventReClick="3000" >下载</el-button >