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 的状态，此时列表是影藏的