美文网首页Vue
Vue中防止按钮的多次点击

Vue中防止按钮的多次点击

作者: hello_web_Front | 来源:发表于2021-01-08 12:01 被阅读0次

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

    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/fa283869df95

    相关文章

      网友评论

        本文标题:Vue中防止按钮的多次点击

        本文链接:https://www.haomeiwen.com/subject/loaxaktx.html