关于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     overevent: 
3         debounce(function(idx) {
4             this.hoverFlag = idx;
5         }, 100),
6 
7   },

 

posted @ 2021-10-31 22:52  行屰  阅读(2435)  评论(0)  编辑  收藏  举报