1.设置一个动态的class,什么时候要去加入背景
<li v-for="(c1,index) in categoryList" :key="c1.categoryList01Id" class="menu-item" @mouseenter="enterList(index)" :class="{cur:currentIndex==index}">
2.动态展示背景的条件是currentIndex==index 的true和false,所以要去改变currentIndex,绑定鼠标的移入和移出事件
注意:在绑定的移入事件中在用户操作过快的时候,会出现卡顿的现象,要使用防抖和节流的操作
这里使用的是节流的操作
// 节流操作,按需加载
import {throttle} from 'lodash/throttle'
enterList:throttle(function(index)
{
this.currentIndex = index;
}),
3.在用户移出的时候,在最上面标题的时候是没有出去的,所以cur的样式是存在的,所以需要使用委派,在两者的父亲节点上绑定鼠标移出的操作
<div class="dropdwon fl" @mouseleave="leavelist">
<!-- 兄弟关系 -->
<div class="dt">全部商品分类</div>
<div class="dd">