vue3——两种利用自定义指令实现防止按钮重复点击的方法

方法一：利用定时器设置时间，下方代码设置时间为1秒

但是有个缺点：请求如果很慢，1秒钟还没有好，那么该方法就没用了

  // 利用定时器：1秒之后才能再次点击app.directive('preventReClick', {mounted: (el, binding) => {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {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 = falseconst handerClick = function (event) {// 如果已经点击过，则阻止事件if (el.isClicked === 'true') {event.preventDefault()event.stopPropagation()return}// 标记为已点击el.isClicked = 'true'// 调用传入的函数binding.value().finally(() => {el.isClicked = 'false'})}el.hander = handerClickel.addEventListener('click', handerClick)},//销毁事件beforeUnmount(el) {if (el.hander) {el.removeEventListener('click', el.hander)}}})