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 的狀態，此時列表是影藏的