vue 防止按钮多次点击重复提交

最新推荐文章于 2024-07-30 10:56:44 发布

前端辣白菜

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量1.4k

点赞数

分类专栏： vue后台管理开发笔记

本文链接：https://blog.csdn.net/weixin_42484657/article/details/123005768

版权

Vue 自定义指令防抖点击事件按钮禁用

关键词由CSDN通过智能技术生成

vue后台管理开发笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1：创建 disPrevent.js

2:代码如下

import Vue from 'vue';

const disPrevent= Vue.directive('disPrevent', {
  inserted: function(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
        }, binding.value || 3000);
      }
    });
  }
});

export { disPrevent};

3:main.js引入

import disPrevent from './utils/disPrevent'

4:使用

         <el-button
          class="confirmBtn"
          type="primary"
          v-disPrevent
          @click="preserveConfirm('ruleForm')"
        >保存</el-button>