vue3——两种利用自定义指令实现防止按钮重复点击的方法
方法一:利用定时器设置时间,下方代码设置时间为1秒
但是有个缺点:请求如果很慢,1秒钟还没有好,那么该方法就没用了
// 利用定时器:1秒之后才能再次点击
app.directive('preventReClick', {
mounted: (el, binding) => {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 1000)
}
})
}
})
方法二:传入请求的函数作为参数,根据请求的finally来判断是否可以点击了,更推荐!!!
但是传入的参数必须是一个promise函数,否则就没用了
//自定义指令版本2:根据请求结果防止按钮重复提交请求
//使用方式:传递一个请求函数,比如v-prevent-dup-click="submit"
app.directive('preventDupClick', {
mounted(el, binding) {
//传递的参数必须是一个函数,否则报错
if (typeof binding.value !== 'function') {
throw new Error('v-prevent-dup-click instruction can transmit only A function')
}
// 一开始是未点击状态
el.isClicked = false
const handerClick = function (event) {
// 如果已经点击过,则阻止事件
if (el.isClicked === 'true') {
event.preventDefault()
event.stopPropagation()
return
}
// 标记为已点击
el.isClicked = 'true'
// 调用传入的函数
binding.value().finally(() => {
el.isClicked = 'false'
})
}
el.hander = handerClick
el.addEventListener('click', handerClick)
},
//销毁事件
beforeUnmount(el) {
if (el.hander) {
el.removeEventListener('click', el.hander)
}
}
})
原文地址:https://blog.csdn.net/zmy967131/article/details/140682680
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!