vue+elementui的導航滑塊組件

工作需要做一個帶滑塊效果的導航欄，初步想法是用element的導航組件去做，后面摸坑結合各位大佬的博客初步實現效果，話不多說，直接上代碼，記錄一下爬坑之旅

<template>
  <div class="y-nav">
    <el-row class="nav">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        text-color="#fff"
      >
        <el-menu-item index="/index">
          <router-link
            to="/"
            @mouseover.native="itransition($event )"
            @mouseout.native="outtransition($event)"
          >首頁</router-link>
        </el-menu-item>
        <el-menu-item index="/leaderboard/leaderlist">
          <router-link
            :to="{name:'leaderboard'}"
            @mouseover.native="itransition($event )"
            @mouseout.native="outtransition($event)"
          >排行榜</router-link>
        </el-menu-item>
        <el-menu-item index="/library">
          <router-link
            :to="{name:'library'}"
            @mouseover.native="itransition($event )"
            @mouseout.native="outtransition($event)"
          >書庫</router-link>
        </el-menu-item>
        <el-menu-item index="/recharge">
          <router-link
            to="/recharge"
            @mouseover.native="itransition($event )"
            @mouseout.native="outtransition($event)"
          >充值</router-link>
        </el-menu-item>
        <el-menu-item index="/vip">
          <router-link
            :to="{name:'vip'}"
            @mouseover.native="itransition($event )"
            @mouseout.native="outtransition($event)"
          >VIP專區</router-link>
        </el-menu-item>
        <el-menu-item index="/institution">
          <router-link
            to="/institution"
            @mouseover.native="itransition($event )"
            @mouseout.native="outtransition($event)"
          >院校</router-link>
        </el-menu-item>
        <el-menu-item index="/community">
          <router-link
            to="/community"
            @mouseover.native="itransition($event )"
            @mouseout.native="outtransition($event)"
          >社區</router-link>
        </el-menu-item>
        <el-menu-item index="/author">
          <router-link
            to="/author"
            @mouseover.native="itransition($event )"
            @mouseout.native="outtransition($event)"
          >作者福利</router-link>
        </el-menu-item>

        <div class="moveblock" ref="moveblock"></div>
      </el-menu>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  // created() {
  //   console.log(document.querySelector(".el-menu>.is-active").offsetLeft);
  // },
  mounted() {
    //獲取menu寬度
    let menuwidth = document.querySelector(".el-menu-item.is-active>a")
      .offsetWidth;
    //獲取li
    let liwidth = document.querySelectorAll(".el-menu li");
    //背景
    let moveblock = document.querySelector(".moveblock");
    //設置背景的寬度
    // moveblock.style.width = liwidth[0].offsetWidth + "px";
    let selfLeft = document.querySelector(".el-menu .is-active").offsetLeft;

    moveblock.style.width = menuwidth + "px";

    let winwidth = document.body.clientWidth;
    // console.log("base：" + selfLeft);
    moveblock.style.left = selfLeft + 35 + "px";
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    itransition($event) {
      //為懸浮元素添加hover
      // $event.currentTarget.className = "router-link-active hover";
      //獲取元素的left值
      let left = $event.currentTarget.getBoundingClientRect().left;
      //獲取移動元素
      let moveblock = document.querySelector(".moveblock");
      //獲取可視區域的寬度
      let winwidth = document.body.clientWidth;
      if (winwidth > 1200) {
        moveblock.style.left = left - (winwidth - 1200) / 2 + "px";
      } else {
        moveblock.style.left = left + "px";
      }
    },
    outtransition($event) {
      // $event.currentTarget.className = "router-link-active";
      //獲取移動元素
      let moveblock = document.querySelector(".moveblock");
      //獲取is-active的offsetLeft
      let selfLeft = document.querySelector(".el-menu .is-active").offsetLeft;
      // let selfLeft = this.$refs.moveblock.offsetLeft;
      moveblock.style.left = selfLeft + 35 + "px";
    }
  }
};
</script>
<style lang="sass">
    @import "@/assets/css/public/header/nav.scss";
</style>

一、element組件的is-active

:default-active="$route.path"

導航的is-active，當時糾結了好久，百度了好久看到這個辦法，還是不行，后來才注意到要結合

<el-menu-item index="/index">

獲取當前的路由路徑和index中的數據進行對比，添加is-active

 

二、關於刷新后的元素offsetleft問題

   最初的想法是

let selfLeft = document.querySelectorAll(".el-menu .is-active").offsetLeft;

　刷新后發現selfLeft的值為undefined，懷疑是mounted中無法獲取刷新后元素的dom，先后試驗了$nextTick 和setTimeout均無法解決問題，后將整體代碼放到created()中仍未解決問題，

   在created()中直接打印document.querySelectorAll(".el-menu .is-active").offsetLeft;也是現實undefined，document.querySelectorAll(".el-menu .is-active")為一個數組結構，果斷換用

let selfLeft = document.querySelector(".el-menu .is-active").offsetLeft;

　出現數據，至此組件效果基本實現，代碼結構稍顯混亂，感覺有很大的優化空間，望各位大佬提出建議~

 

剛測試的時候發現bug，在子路由下無法匹配is-active，現進行更改

// 將default-active綁定到dfactive上 
<el-menu
        :default-active="dfactive"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        text-color="#fff"
      >
// 截取當前路由第一層路徑的地址
data() {
    return {
      dfactive:this.$route.path.split("/")[1]
    };
  }

這樣就能匹配子路由的鏈接了~~~