美文网首页
vue防按钮重复点击(指令实现)

vue防按钮重复点击(指令实现)

作者: 一人创客 | 来源:发表于2020-09-15 00:18 被阅读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)

              }

            })

          }

        })

      }

    }

    ```

    在main.js引用

    按钮调用直接加v-preventReClick

    相关文章

      网友评论

          本文标题:vue防按钮重复点击(指令实现)

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