点击防颤

新建一个文件 index.js

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

main中全局引用

import debounce from './directive/debounce/index'
Vue.use(debounce)

在需要使用的地方这样使用就好

image.png

export default {
  install(Vue: {
    directive: (
      arg0: string,
      arg1: { inserted(el: any, binding: any): void }
    ) => void;
  }) {
    // 防止重复点击
    Vue.directive("preventClick", {
      inserted(
        el: {
          addEventListener: (arg0: string, arg1: () => void) => void;
          disabled: boolean;
          insertAdjacentHTML: any;
          removeChild: any;
          classList: any;
          querySelectorAll: any;
        },
        binding: any = 1000,
      ) {
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.classList.add("is-loading");
            el.insertAdjacentHTML(
              "afterBegin",
              "<i class='fa fa-spinner fa-spin'></i>"
            );
            setTimeout(() => {
              el.classList.remove("is-loading");
              el.removeChild(el.querySelectorAll("i")[0]);
            }, binding.value || 1000);
          }
        });
      },
    });
  },
};