关于vue中使用lodash的防抖用法

本文主要是介绍关于vue中使用lodash的防抖用法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

需求：手风琴效果（mouseover的函数防抖）

1.安装： npm install --save lodash

2.引入：import debounce from "lodash.debounce";

3.使用：

 1       <div class="home_box">
 2         <div
 3           class="home_menu"
 4           v-for="(item, idx) in homeMenu"
 5           :key="idx"
 6           :class="{ active: hoverFlag === idx }"
 7        @mouseover="overevent(idx)"
 8         >
 9           <p :class="item.icon" class="home_menu_title">{{ item.label }}</p>
10           <ul class="home_menu_list">
11             <li
12               v-for="(item1, idx1) in item.child"
13               :key="idx1"
14               :class="item1.class"
15               @click="routerLink(item1.url)"
16             >
17               <img :src="item1.img" alt="" />
18             </li>
19           </ul>
20         </div>
21       </div>

如果事件需要传递参数：

 1   methods: {
 2     // 鼠标滑入事件
 3     overevent(idx) {
 4         this.enterEvent(idx)
 5     },
 6     enterEvent: 
 7         debounce(function(idx) {
 8             this.hoverFlag = idx;
 9         }, 200),
10 
11   },

如果事件不需要传递参数，可以如下写法

1   methods: {
2     // 鼠标滑入事件
3     overevent:
4         debounce(function() {
5             执行的事情
6         }, 200),
7   },

这篇关于关于vue中使用lodash的防抖用法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！