vue自定义指令preventReClick防止多次点击,针对于elementUI button
1、定义全局指令文件 Vue.directiveimport Vue from 'vue'// 自定义指令防止按钮重复点击 v-preventReClick(使用时)const preventReClick = Vue.directive('preventReClick', {inserted: function (el, binding) {el.addEventListener('click'
·
1、定义全局指令文件 Vue.directive
import Vue from 'vue'
// 自定义指令防止按钮重复点击 v-preventReClick(使用时)
const preventReClick = Vue.directive('preventReClick', {
inserted: function (el, binding) {
el.addEventListener('click', () => {
console.log(11111)
console.log(el)
if (!el.disabled) {
el.disabled = true
el.style.opacity = '0.5'
el.style.cursor = 'not-allowed'
setTimeout(() => {
el.disabled = false
el.style.opacity = '1'
el.style.cursor = ''
}, binding.value || 1500)
}
})
}
})
export default preventReClick
2、mainjs中引用
import preventReClick from './plugins/plugins'
Vue.use(preventReClick)
3、在需要的地方使用
<el-button type="primary" v-preventReClick="5000" @click="alertText">默认按钮</el-button>
更多推荐
已为社区贡献1条内容
所有评论(0)