vue3指令重复点击只发送一次请求

最新推荐文章于 2025-02-25 10:30:18 发布

Eli-sun

最新推荐文章于 2025-02-25 10:30:18 发布

阅读量951

点赞数

本文链接：https://blog.youkuaiyun.com/vfjcgg/article/details/125026323

版权

JavaScript 同时被 3 个专栏收录

71 篇文章

订阅专栏

Vue

21 篇文章

订阅专栏

ES6

14 篇文章

订阅专栏

vue3写法指令

在main.js中
在app上挂载该方法

app.directive(
	'preventReClick', {
            mounted: function (el, binding) {
                el.addEventListener('click', () => {
                    const events = el.style.pointerEvents
                    if (events == "") {
                        el.style.pointerEvents = 'none'
                        setTimeout(() => {
                            el.style.pointerEvents = "";
                        }, binding.value || 1000);
                    }
                })
            }
        }
)

在需要用的页面的标签上加上v-preventReClick
这里直接填也可以 v-preventReClick 默认是1秒， v-preventReClick=“2000” 表示延迟2秒

<div  class="icon-button"  @click="save" v-preventReClick="2000">

vue2指令

1.在utils文件夹下新建preventReClick.js文件

export default {
    install(Vue) {
        Vue.directive('preventReClick', {
            inserted(el, binding) {
                el.addEventListener('click', () => {
                    const events = el.style.pointerEvents
                    if (events == "") {
                        el.style.pointerEvents = 'none'
                        setTimeout(() => {
                            el.style.pointerEvents = "";
                        }, binding.value || 1000);
                    }

                })
            }
        })
    }
}

2.main.js引入

//引入
import preventReClick from './utils/preventReClick'
//注册
Vue.use(preventReClick)

3.使用
这里直接填也可以 v-preventReClick 默认是1秒， v-preventReClick=“2000” 表示延迟2秒

<div  class="icon-button"  @click="save" v-preventReClick="2000">