el-button 防止快速双击笔记
自定义全局指令
测试测出的bug, 新增表单时快速双击, 表单会保存两次, 使用disabled和loading效果不佳。
新建一个js文件, 文件名自定义, 这里文件名为 plugins.js
import Vue from 'vue';
// 防重复点击(指令实现)
Vue.directive('preventReClick', {
inserted(el, binding) {
console.log(el);
console.log(binding);
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
})
}
})
在man.js里面引入
// 自定义指令
require('@/assets/public/js/plugins.js');
使用时调用
<el-button size="medium" type="success" @click="onSaveForm" v-preventReClick>保 存</el-button>