您的位置:首页 > 房产 > 家装 > vue3 自定义防抖指令(全局)自定义指令增加

vue3 自定义防抖指令(全局)自定义指令增加

2024/10/6 14:26:09 来源:https://blog.csdn.net/oMangGuoBuDing1/article/details/140919373  浏览:    关键词:vue3 自定义防抖指令(全局)自定义指令增加
//代码路径 src\utils\throttle.js
// 点击防抖
const throttle = {bind: (el, binding) => {let throttleTime = binding.value // 防抖时间if (!throttleTime) { // 用户若不设置防抖时间,则默认1sthrottleTime = 1000}let timerlet disable = falseel.addEventListener('click', event => {if (timer) {clearTimeout(timer)}if (!disable) { // 第一次执行(一点击触发当前事件)disable = true} else {event && event.stopImmediatePropagation()}timer = setTimeout(() => {timer = nulldisable = false}, throttleTime)}, true)}}// 将函数作为默认导出
export default throttle
//代码位置 src\main.ts// 导入防抖逻辑js代码
import throttle from  '@/utils/throttle'const setupAll = async () => {const app = createApp(App)
// 全局注册指令
app.directive('throttle',throttle.bind)}//具体使用,效果是1.5秒内的连续点击都无效,不点了,等1.5秒后才生效
<el-button  type="danger" @click="getdocListF" v-throttle="1500">查询</el-button>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com