vue directive自定义指令防止按钮在短时间内多次点击

Posted 2023-05-05

参考技术A 1、使用directives自定义钩子，自定义指令change

2、直接使用自定义指令change，前面加上v,使用的时候使用v-change

Vue中防止按钮的多次点击

通过自定义指令的方式，这样简单方便

debounce.js

export default {
    install(Vue) {
        Vue.directive("debounce", {
            // bind 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置,比如我们可以设置样式
            bind(el) {
                // console.log(el)
            },
            // 被绑定的元素插入到父节点时
            inserted(el, binding) {
                el.addEventListener(\'click\', function () {
                    let time = binding.value.time;
                    let methods = binding.value.methods;
                    clearTimeout(el.timeId)
                    el.timeId = setTimeout(() => {
                        methods()
                    }, time);

                })
            }
        })
    }
}

main.js

import debounce from "./directive/debounce"

Use:

// 传入需要指定的时间，以及对应的事件处理函数

<template>
  <div class="OrganizationManagement">
    <div v-debounce="{ time: 1000, methods: clickHandle }">点我</div>
  </div>
</template>

<script>
export default {
      name: "OrganizationManagement",
      data() {
        return {
          aaa:12
        };
      },
      methods: {
        clickHandle() {
          console.log(this.aaa);
        },
      },
      mounted() {},
};
</script>

 <style scoped lang="less" scoped></style>

参考链接： https://www.jianshu.com/p/fa2...