element 自定义指令解决按钮连续点击问题:
提示:可以通过自定义全局指令的方式来实现。在main.js中引入下面,即可以全局使用。
preventReClick.js
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 type="primary" @click="handleSave" v-preventReClick>保存</el-button>