vue防止按钮多次点击

最新推荐文章于 2025-02-25 10:30:18 发布

前端代码の搬运工

最新推荐文章于 2025-02-25 10:30:18 发布

阅读量218

点赞数

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

本文链接：https://blog.youkuaiyun.com/a13145211/article/details/125836494

版权

js 专栏收录该内容

5 篇文章

订阅专栏

该博客介绍了如何在Vue.js中创建一个自定义指令`v-preventReClick`，用于防止按钮在短时间内被连续点击。通过监听点击事件并设置禁用状态及样式变化，实现点击后的视觉反馈和功能限制，等待2秒后恢复可点击状态。

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

====== directive.js文件中 ====
import Vue from 'vue'
const preventReClick = Vue.directive('preventReClick',{
	inserted: function(el, binding, vNode, oldVnode){
		el.addEventListener('click', () => {
			if(!el.disabled){
			    el.disabled = true
			    el.style.backgroundColor = '#ccc'
			    el.style.border = 'none'
       			setTimeout(() => {
          			el.disabled = false
          			 el.style.backgroundColor = '#1890ff'	
          			 el.style.border = '1px solid #1890ff'
        		}, 2000)
			}
		})
	}
})

export default {
	preventReClick 
}


====== 在main.js文件中引入指令 =====
import {preventReClick } from './directive/directive.js'
Vue.use(preventReClick )
————————————————

``
<el-button type="primary" @click="handleSave" v-preventReClick>保存</el-button>