可以通过自定义全局指令的方式来实现。在main.js中加入 下面的指令,即可以全局使用。
// 防止el-button重复点击
Vue.directive('preventReClick', {
inserted(el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true;
el.style.cursur='not-allowed'
setTimeout(() => {
el.disabled = false
el.style.cursor ='pointer'
}, binding.value || 2000)
}
})
}
});
接着在el-button中添加v-preventReClick,就可实现效果,在点击之后按钮变为禁用状态,持续禁用两秒,两秒之后便可再一次提交。
// 添加新属性
<el-button type="primary" @click="handleSave" v-preventReClick>保存</el-button>