vue自定义指令preventReClick防止多次点击，针对于elementUI button

RightHereWaitingFY

于 2020-09-30 11:16:06 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/luyundesign/article/details/108882245

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个用于Vue应用的自定义指令`v-preventReClick`，该指令用于防止用户在短时间内重复点击按钮，从而避免多次触发同一操作。通过监听点击事件并在点击后禁用按钮并设置透明度，确保按钮在一段时间内不可用，然后在延迟时间结束后恢复其正常状态。在`main.js`中引入并全局注册此指令后，即可在组件中方便地使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、定义全局指令文件 Vue.directive

import Vue from 'vue'
// 自定义指令防止按钮重复点击 v-preventReClick(使用时)
const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      console.log(11111)
      console.log(el)
      if (!el.disabled) {
        el.disabled = true
        el.style.opacity = '0.5'
        el.style.cursor = 'not-allowed'
        setTimeout(() => {
          el.disabled = false
          el.style.opacity = '1'
          el.style.cursor = ''
        }, binding.value || 1500)
      }
    })
  }
})
export default preventReClick

2、mainjs中引用

import preventReClick from './plugins/plugins'
Vue.use(preventReClick)

3、在需要的地方使用

<el-button type="primary" v-preventReClick="5000" @click="alertText">默认按钮</el-button>