需求:手风琴效果(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 },