ElementUi防止重复点击 CV,Util

最新推荐文章于 2024-08-02 19:15:00 发布

a_littleStory

最新推荐文章于 2024-08-02 19:15:00 发布

阅读量2.4k

点赞数 4

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

本文链接：https://blog.csdn.net/a_littleStory/article/details/127306097

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

新建文件 preventReClick.js：

import Vue from 'vue'
// 在vue上挂载一个指量 preventReClick
// vue防止按钮重复点击
const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        this.$message.warning('操作频繁')
        setTimeout(() => {
          el.disabled = false
          //设置时间
        }, binding.value || 3000)
      }
    })
  }
})
export { preventReClick }

在 main.js 中引入该文件组件

import { preventReClick } from './preventReClick'

Vue.use(preventReClick)

在要防止重复点击的按钮上使用该指令 v-prevent-re-click

// 原来的方法如果短时间连续点击了会导致重复创建问题
<el-button @click="submitForm()">创建</el-button>

// 3000 毫秒之内会提示 频繁操作，不会触发提交方法
<el-button v-prevent-re-click @click="submitForm()">创建</el-button>