vue自定义节流指令

已于 2022-12-07 09:01:45 修改
阅读量492 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2022-12-06 17:09:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_43383724/article/details/128206174
版权

节流:在n秒中连续触发元素的点击的事件,点击事件只会触发一次(该指令是针对元素点击,在n秒元素不触发点击事件)

 使用

pointer-events:CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的目标对象。除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。具有继承性

可选值:

auto:与pointer-events属性未指定时的表现效果相同

none:元素永远不会成为鼠标事件的target 。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

其他:只适用于 SVG

上面结果:

 点击绿色框,会打印box2 box1,因为box2的盒子pointer-events的值为auto,所以box1的监听事件是在冒泡阶段捕获的,如果不给box2的盒子设置pointer-events,那么点击box2什么都不会打印

lcy-lll
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
一线大厂常用的六大vue自定义指令合集之节流v-throttle
lixiaosenlin的专栏
10-06 2182
前言 截至目前，一线大厂常用的6大vue自定义指令中，我们已经学习实现了3个了，而其中上一篇 一线大厂常用的六大vue自定义指令合集之防抖v-debounce中的自定义防抖指令与我们今天要学习的节流自定义指令除了函数不一样，其它的基本上是一模一样。下面让我们一起来揭开它的面纱吧！ 关于javascript中是如何实现节流，这里不再过多赘述，感兴趣的小伙伴可以查看这篇web前端高级JavaScript - 函数的防抖和节流文章了解更多。本篇文章主要介绍如何实现一个节流的自定义指令，下面我们就来分析一下大体实
Vue中如何自定义(v-throttle)节流指令
鸭绒的博客
08-13 1708
背景：在开发中，我们经常会在搜索框中使用防抖或节流进行优化，因此为了方便，今天我们自定义一个(v-throttle)指令。 自定义指令语法：可参考官方文档 1.在项目的utils目录下定义util.js模块(通常该模块放一些通用的工具方法)： export const throttle = (callback, delay) => { let timer = null return (e) => { if (!timer) { timer = setTimeout.
Vue进阶（四）自定义指令，并使用自定义指令实现防抖节流
Niall_Tonshall的博客
03-16 3474
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 注意：这里官方对自定义指令有明确的说明，所以我们应该尽量去遵守，而不应该盲目的滥用自定义指令去完成一些任务 1. 指令 Vue为我们添加了很多内置指令，我们可以直接使用，例如v-on,v-bind,v-model，形如v-xx。 2. 自定义指令 假设我们现在需要在
vue3 + ts自定义指令-节流【模块化，工程化】
qq_22841387的博客
08-05 2274
因为这里我们需要创建的指令是节流指令，因此文件名称为内部指令框架大概如下import {/** 默认延迟触发时间 */ const delay = 200;首先，函数整体使用函数包括，类似于闭包的思想自定义节流指令完整代码import {/** 定时器 */ let timer : number = null function throttleELfun(el : HTMLElement , throttleTime = 200) {if(!...
Vue自定义指令封装节流函数的方法示例
08-27
本篇文章主要介绍了Vue自定义指令封装节流函数的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目中使用全局自定义指令实现防抖和节流，防止频繁调用接口
weixin_51938803的博客
04-21 2873
vue项目中使用全局自定义指令实现防抖和节流，防止频繁调用接口
Vue自定义弹窗指令的实现代码
10-18
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
vue自定义指令实现方法详解
10-17
主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下
Vue自定义指令详解
08-29
主要为大家详细介绍了Vue自定义指令的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue自定义指令实现防抖和节流；vue实现防抖或节流
weixin_43286206的博客
09-20 1725
Vue自定义指令实现防抖和节流；vue实现防抖或节流 防抖和节流 什么是防抖和节流，两者的区别是什么
重学JS | 防抖与节流（含vue自定义指令&Vue+Ts防抖）
Ethan's Blog
12-03 3350
介绍常规的防抖节流实现方式以及业务场景。 看完这篇足矣！
vue2自定义节流指令
zluz_的博客
08-14 143
vue2自定义节流指令
Vue处理防抖和节流，项目中封装防抖和节流自定义指令
weixin_53641562的博客
03-20 3386
Vue防抖和节流的处理，概念和应用场景举例，实际项目开发的自定义指令封装
节流， 使用vue自定义指令写节流
yw_hard的博客
06-17 236
使用vue自定义指令写截流
Vue3自定义指令实现防抖节流（支持所有eventType，建议收藏）
weixin_68714627的博客
08-14 1338
Vue3+TS自定义指令实现防抖节流（目前全网最佳，支持所有eventType，建议收藏哈哈哈）
Vue自定义节流指令
niceday的博客
01-03 692
Vue自定义节流指令，vue自定义指令、节流、防止多次点击、防爆点击
Vue 自定义组件directive使用总结
caoxinjian423的博客
10-02 1009
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&gt.
vue 节流&防抖 自定义指令|函数|ts装饰器
WEBYANGxw的博客
12-26 667
vue 节流&防抖 自定义指令
vue中防抖和节流的多种使用方式——装饰器，指令，通用方法
stupid_muscleman的博客
12-22 593
vue中通过自定义指令，装饰器和普通方法使用防抖和节流
vue自定义指令防抖节流
最新发布
09-09
Vue自定义指令中的防抖和节流是一种优化技巧，用于处理频繁触发的事件。防抖和节流可以减少事件触发的次数，从而提高性能和响应速度。 防抖指的是当事件触发后，等待一段时间后再执行回调函数。如果在等待期间又触发了同样的事件，则会重新计时。这个技巧适用于一些需要等待一段时间后才执行的操作，比如搜索框输入联想功能。通过防抖可以减少不必要的请求次数，提高用户体验。 节流则是指在一定时间间隔内，只执行一次回调函数。如果在间隔时间内有多次事件触发，则只会执行一次。这个技巧适用于一些需要限制频繁触发的操作，比如滚动加载数据。通过节流可以减少不必要的计算和渲染，提高页面性能。 在Vue中，可以通过自定义指令来实现防抖和节流的功能。可以使用第三方库如Lodash来简化实现过程，也可以根据需求自己编写相关的代码逻辑。通过自定义指令，可以将防抖和节流的逻辑封装到指令中，并在需要的地方进行调用。 例如，可以定义一个防抖指令，在指令的inserted钩子函数中使用Lodash的防抖函数来实现防抖功能。在指令的unbind钩子函数中取消防抖。 ```javascript Vue.directive('debounce', { inserted: function(el, binding) { const delay = binding.value || 200; el.addEventListener('input', _.debounce(function() { // 执行相关操作 }, delay)); }, unbind: function(el) { el.removeEventListener('input'); } }); ``` 类似地，可以定义一个节流指令，在指令的inserted钩子函数中使用Lodash的节流函数来实现节流功能。在指令的unbind钩子函数中取消节流。 ```javascript Vue.directive('throttle', { inserted: function(el, binding) { const delay = binding.value || 200; el.addEventListener('scroll', _.throttle(function() { // 执行相关操作 }, delay)); }, unbind: function(el) { el.removeEventListener('scroll'); } }); ``` 通过使用自定义指令来实现防抖和节流，可以更灵活地控制事件的触发频率，提高页面性能和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值