防止快速点击按钮会重复多次调用接口，防止出现这样的情况(全局自定义指令）

最新推荐文章于 2024-06-22 11:00:11 发布

我家媳妇儿萌哒哒

最新推荐文章于 2024-06-22 11:00:11 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue.js vue

本文链接：https://blog.csdn.net/qq_44146522/article/details/116163291

版权

vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

防止快速点击按钮会重复多次调用接口，防止出现这样的情况

第一步：新建 plugins.js

export default {

    install (Vue) {

        // 防重复点击(指令实现)

        Vue.directive('preventreclick', {

            inserted (el, binding) {

                el.addEventListener('click', () => {

                if (!el.disabled) {

                       el.disabled = true

                        setTimeout(() => {

                            el.disabled = false

                        }, binding.value || 3000)

                 }

            })

        }

     })

   }

}