一、创建文件preventReClick.js将下面代码拷贝进文件
// 自定义指令防止按钮重复点击 v-preventReClick
export default {
inserted(el, binding, vnode) {
el.addEventListener('click', () => {
// 是否可见
if (!el.disabled) {
el.disabled = true
el.style.display = 'none'
setTimeout(() => {
el.disabled = false
el.style.display = ''
}, binding.value || 1500)
// 不设置默认则为1500
}
})
},
}
二、同级下创建index.js
import preventReClick from './preventReClick'
const install = function(Vue) {
Vue.directive('preventReClick', preventReClick)
}
if (window.Vue) {
window['preventReClick'] = preventReClick
Vue.use(install); // eslint-disable-line
}
export default install
Vue3写法
import preventReClick from './preventReClick'
export default function directive(app){
app.directive('preventReClick',preventReClick)
}
三、在main.js引入index.js
import permission from './directive/permission/index.js'//你的文件路径
Vue.use(permission)
Vue3写法
import directive from './directive' // directive
directive(app)
四、在你需要控制的按钮上加入v-preventReClick="2000" //2000是隐藏时间可以根据你的需求设置
<el-button type="primary" @click="submitForm" v-preventReClick="2000">按钮</el-button>