vue防止按钮多次点击

最新推荐文章于 2024-07-25 10:25:59 发布

前端代码の搬运工

最新推荐文章于 2024-07-25 10:25:59 发布

阅读量188

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/a13145211/article/details/125836494

版权

vue.js javascript 前端

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

====== 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>