Vue中防止按钮的多次点击

Posted 春风十里不如你

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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...

以上是关于Vue中防止按钮的多次点击的主要内容,如果未能解决你的问题,请参考以下文章

uniapp 防止重复点击

Vue js如何防止按钮连续点击两次[重复]

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

Swift 防止按钮重复点击

Vue项目按钮重复提交

防止按钮多次点击重复提交