首页 > 其他分享 > v-debounce-throttle是一个vue防抖节流指令

v-debounce-throttle是一个vue防抖节流指令

时间:2022-10-11 16:11:41浏览次数:48  
标签:防抖 vue throttle 节流 debounce 修饰符

v-debounce-throttle是一个vue防抖节流指令

简介

v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率。其核心是拦截组件元素的v-on绑定事件,采用原生的事件注册机制。具体代码如下: 6 起步

安装

  npm install v-debounce-throttle -S

引入

  import vDebounceThrottle from 'v-debounce-throttle'

  Vue.use(vDebounceThrottle)

示例

防抖

  <button v-debounce="handleClick"></button>

节流

  <button v-throttle="handleClick"></button>

使用案例 使用方法1

  <button v-debounce="handleClick">方法1</button>

使用方法2

  <button v-debounce="{fun: 'handleClick', event: 'click', args: 'test'}"></button>

使用方法3

  <button v-debounce.dblclick.stop="handleDblclick"></button>

API文档 参数

默认延迟后触发,如若调整顺序,可以设置before、all修饰符 修饰符(modifier) 事件

  click

   dblclick

   keyup

   keydown

   keypress

   mousedown

   mouseover

   mouseleave

   scroll 事件修饰符

   stop(取消冒泡)

   prev(阻止默认事件)

   before(防抖延迟前触发)

   all(防抖延迟前后都触发)

标签:防抖,vue,throttle,节流,debounce,修饰符
From: https://www.cnblogs.com/Jishuyang/p/16779576.html

相关文章

  • vue-i18n 多语言安装依赖失败
    在vue2环境下,默认安装npminstallvue-i18n的版本是[email protected],所以报错信息如下:PSD:\myFile\dev\YSJ-dev\cbj-mall-manage>npmivue-i18n-savenpmERR!code......
  • Hbuilder运行Vue项目
    一.NodeJs的介绍二.NodeJs的安装与配置环境变量1.安装NodeJs官网:http://nodejs.cn/download/(注意:不要下载最新版本的NodeJs,会出现问题!)如果使用的是msi安装程序进行暗......
  • vue中is的作用和用法
    is的作用<ul><li></li><li></li><li></li></ul>总所周知,ul里面嵌套li的写法是html语法的固定写法(还有如table,select等)。//code1<ul><my-component></my-componen......
  • vue3中tab详情页多开keepalive根据key去动态缓存与清除缓存
    一.场景由于存在tab栏,当从查询页面点击列表进入详情时,需求是详情页都会新开一个tab,并缓存,tab中的切换不会重新加载详情页数据,但是关闭一个详情tab,再次从查询页点击这条详......
  • vue-router:history和hash的区别
    前言:写这个随笔是因为后端部署时,第一次进入页面无问题,刷新后页面空白,寻找原因发现有两个解决方案;1、后端nginx做保底映射,映射到正确的路径;2、前端更改为hash模式也可解决......
  • 如何运行别人的Vue项目
    1、将项目里的“node_modules”文件夹删除,一般“node_modules”文件夹太大,一般不会打包上传到svn、git上的,所以没有这个文件夹就不用删。2、删除package-lock.json。它是......
  • vue项目启动cannot get,并且还有报错信息..
    项目中需要下载vue-table-with表单组件,需要第三方依赖库下载。结构npm下载失败,直接先下载yarn--再下载vue-table-with组件----结构整个项目崩溃了。一直报错...卸载了ya......
  • Vue3的模板语法
    1.插值语法1.1基本使用点击查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • 使用CDN方式引用Vue3和ElementPlus
    使用CDN方式引用Vue3和ElementPlus​​引用Vue​​​​代码​​​​注意事项​​​​Elementplus​​​​代码​​​​注意事项​​升级了之前做的vue2+ElementUI的项目,......
  • vue打包部署时页面布局混乱
    vue打包部署样式混乱问题分析:样式混乱最根本的原因就是样式冲突。样式冲突是如何产生的?由于一个页面由多个.vue文件组成,后每个.vue文件都有style,所以就导致冲突了......