vue前台（三）移入移出背景颜色显示与隐藏， 移入移出列表显示与隐藏
typeNav.vue
模板template
一.移入移出背景颜色显示与隐藏，
<div @mouseleave="moveOut" @mouseenter="isShow=true"> <h2 class="all">全部商品分类</h2> <transition name="show"> <div class="sort" v-show="isShow"> <div class="all-sort-list2" @click="toSearch"> <div class="item" v-for="(c1, index) in categoryList" :key="c1.categoryId" @mouseenter="moveIn(index)" :class="{item_on:currentIndex === index}" > <h3> <a href="javascript:;" :data-category1Id="c1.categoryId" :data-categoryName="c1.categoryName" >{{c1.categoryName}}</a> <!-- 为什么不适用声明式导航，因为一次性创建了多个组件对象影响效率，因此我们采用编程式导航去跳转 --> <!-- <router-link :to="{name:'search',query:{categoryName:c1.categoryName,category1Id:c1.categoryId}}">{{c1.categoryName}}</router-link> --> <!-- 使用了编程式导航，但是效率还不是很高，因为每个类别都添加了相同的点击事件，每个点击事件都有自己的回调函数 采用事件委派（事件委托，事件代理）来处理--> <!-- <a href="javascript:;" @click="$router.push({name:'search',query:{categoryName:c1.categoryName,category1Id:c1.categoryId}})">{{c1.categoryName}}</a> --> </h3> <div class="item-list clearfix"> <div class="subitem"> <dl class="fore" v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId"> <dt> <!-- <router-link :to="{name:'search',query:{categoryName:c2.categoryName,category2Id:c2.categoryId}}">{{c2.categoryName}}</router-link> --> <!-- <a href="javascript:;" @click="$router.push({name:'search',query:{categoryName:c2.categoryName,category2Id:c2.categoryId}})">{{c2.categoryName}}</a> --> <a href="javascript:;" :data-category2Id="c2.categoryId" :data-categoryName="c2.categoryName" >{{c2.categoryName}}</a> </dt> <dd> <em v-for="(c3, index) in c2.categoryChild" :key="c3.categoryId"> <!-- <router-link :to="{name:'search',query:{categoryName:c3.categoryName,category3Id:c3.categoryId}}">{{c3.categoryName}}</router-link> --> <!-- <a href="javascript:;" @click="$router.push({name:'search',query:{categoryName:c3.categoryName,category3Id:c3.categoryId}})">{{c3.categoryName}}</a> --> <a href="javascript:;" :data-category3Id="c3.categoryId" :data-categoryName="c3.categoryName" >{{c3.categoryName}}</a> </em> </dd> </dl> </div> </div> </div> </div> </div> </transition> </div>
注释；
1.@mouseenter="moveIn(index)" 为移入事件，
2.@mouseleave="moveOut"为移出事件，
3.:class="{item_on:currentIndex === index}" 为自定义的类
less部分
.item_on {
background-color: #aaa;
}
js部分
data() {
return {
currentIndex: -1,
};
},
methods: {
moveIn: throttle(
function(index) {
console.log(index);
this.currentIndex = index;
},
50,
{ trailing: false }
),
//{ 'trailing': true } 拖延触发，节流操作函数触发如果是true，那么是在规定时间结束之后触发
//{ 'trailing': false } 不拖延触发，节流操作函数触发如果是false，那么是在规定时间开始就触发
//鼠标移出隐藏23级
moveOut() {
this.currentIndex = -1;
if (this.$route.path !== "/home") {
this.isShow = false;
}
},
},
注：1.移入移出事件，控制颜色变化，就是控制它的布尔值，移入如何为真，移出如何为假，此时有个小技巧，通过index来控制，改变currentIndex的值即可
二.移入移列表显示与隐藏，
背景：此时typeNav.vue在 /home 路径下， 通过路由连接切换到 /search路径下，/search路径也有typeNav.vue
1.html部分
<div @mouseleave="moveOut" @mouseenter="isShow=true"> <h2 class="all">全部商品分类</h2> <transition name="show"> <div class="sort" v-show="isShow"> <div class="all-sort-list2" @click="toSearch"> <div class="item" v-for="(c1, index) in categoryList" :key="c1.categoryId" @mouseenter="moveIn(index)" :class="{item_on:currentIndex === index}" > <h3> <a href="javascript:;" :data-category1Id="c1.categoryId" :data-categoryName="c1.categoryName" >{{c1.categoryName}}</a> <!-- 为什么不适用声明式导航，因为一次性创建了多个组件对象影响效率，因此我们采用编程式导航去跳转 --> <!-- <router-link :to="{name:'search',query:{categoryName:c1.categoryName,category1Id:c1.categoryId}}">{{c1.categoryName}}</router-link> --> <!-- 使用了编程式导航，但是效率还不是很高，因为每个类别都添加了相同的点击事件，每个点击事件都有自己的回调函数 采用事件委派（事件委托，事件代理）来处理--> <!-- <a href="javascript:;" @click="$router.push({name:'search',query:{categoryName:c1.categoryName,category1Id:c1.categoryId}})">{{c1.categoryName}}</a> --> </h3> <div class="item-list clearfix"> <div class="subitem"> <dl class="fore" v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId"> <dt> <!-- <router-link :to="{name:'search',query:{categoryName:c2.categoryName,category2Id:c2.categoryId}}">{{c2.categoryName}}</router-link> --> <!-- <a href="javascript:;" @click="$router.push({name:'search',query:{categoryName:c2.categoryName,category2Id:c2.categoryId}})">{{c2.categoryName}}</a> --> <a href="javascript:;" :data-category2Id="c2.categoryId" :data-categoryName="c2.categoryName" >{{c2.categoryName}}</a> </dt> <dd> <em v-for="(c3, index) in c2.categoryChild" :key="c3.categoryId"> <!-- <router-link :to="{name:'search',query:{categoryName:c3.categoryName,category3Id:c3.categoryId}}">{{c3.categoryName}}</router-link> --> <!-- <a href="javascript:;" @click="$router.push({name:'search',query:{categoryName:c3.categoryName,category3Id:c3.categoryId}})">{{c3.categoryName}}</a> --> <a href="javascript:;" :data-category3Id="c3.categoryId" :data-categoryName="c3.categoryName" >{{c3.categoryName}}</a> </em> </dd> </dl> </div> </div> </div> </div> </div> </transition> </div>
注：
@mouseenter="isShow=true" 为移入事件
<div class="sort" v-show="isShow">， 控制列表是否影藏
js部分
data() {
return {
currentIndex: -1,
isShow: true
};
},
mounted() {
if (this.$route.path !== "/home") {
this.isShow = false;
}
},
methods: {
moveOut() {
this.currentIndex = -1;
if (this.$route.path !== "/home") {
this.isShow = false;
}
},
},
注：1.点击路由连接切换到 /serach路径，typeNav.vue刚加载完，通过path路径判断，立刻影藏列表
2.通过移入事件后，isShow 设定true,列表立刻出现，
3.但是此时鼠标移出后，isShow 还是之前的true，列表此时还是出现的，那么在移出 后，也要判断下path,改变isShow 的状态，此时列表是影藏的
