Element + vue 导航栏滑块改版+

Element + vue 导航栏滑块改版+

项目中使用了elementui+vue的导航栏模块，需要做到底部滑块跟随鼠标效果，经反复思考及bug修改得以下代码：

<template>
  <div class="y-nav">
    <el-row class="nav">
      <!-- 将default-active绑定到dfactive上 -->
      <el-menu
        :default-active="dfactive"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        text-color="#fff"
      >
        <!-- elemtntui中使用:default-active="dfactive"的值与index值作比较，相同的值给当前el-menu-item赋予.is-active，当前的导航块可循环出来 -->
        < index="index">
          <router-link
            to="/"
            @mouseover.native="itransition($event )"
            @mouseout.native="outtransition($event)"
          >首页</router-link>
        </el-menu-item>
        <el-menu-item index="leaderboard">
          <router-link
            :to="{name:'leaderboard'}"
            @mouseover.native="itransition($event )"
            @mouseout.native="outtransition($event)"
          >排行榜</router-link>
        </el-menu-item>
        <el-menu-item index="library">