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">