移入移出背景顏色顯示與隱藏， 移入移出列表顯示與隱藏
阿新 • • 發佈：2020-07-16
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" 為移入事件 <divclass="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 的狀態，此時列表是影藏的