Element-ui导航组件NavMenu导航高亮设置
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
Element-ui导航组件: NavMenu
导航HighLight
高亮设置
1. 文件navMenu.vue
,部分代码参考:
<template>
<div class="nav-menu">
<!--:route="{path: '/area'}"-->
<el-menu
:default-active="$route.path"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b" router>
<el-menu-item index="/"><img src="../../../static/images/logo.png"/></el-menu-item>
<el-menu-item index="/index">首页2</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="/job">职位申请</el-menu-item>
<el-menu-item index="/area">区域选择</el-menu-item>
<el-submenu index="5">
<template slot="title">表格</template>
<el-menu-item index="/table/base">基础数据填充</el-menu-item>
<el-menu-item index="/table/horse">带斑马纹表格</el-menu-item>
<el-menu-item index="/table/border">带边框表格</el-menu-item>
<el-menu-item index="/table/rowclassname">带状态表格</el-menu-item>
<el-menu-item index="/table/fixedheight">固定列、表头(文字操作)</el-menu-item>
<el-menu-item index="/table/maxheight">流体高度(文字操作)</el-menu-item>
<el-menu-item index="/table/moreth">多级表头(表头嵌套)</el-menu-item>
<el-menu-item index="/table/choose">单选、多选</el-menu-item>
<el-menu-item index="/table/sort">排序</el-menu-item>
<el-menu-item index="/table/tagselect">筛选(div模拟selelct)</el-menu-item>
<el-menu-item index="/table/columntemplate">自定义列模板(按钮操作)</el-menu-item>
<el-menu-item index="/table/opentr">展开行</el-menu-item>
</el-submenu>
<el-submenu index="6">
<template slot="title">Upload上传</template>
<el-menu-item index="/upload/click">点击上传</el-menu-item>
<el-menu-item index="/upload/userheadpic">用户头像上传</el-menu-item>
<el-menu-item index="/upload/photowall">照片墙</el-menu-item>
<el-menu-item index="/upload/thumblist">图片列表缩略图</el-menu-item>
<el-menu-item index="/upload/docslist">上传文件列表控制</el-menu-item>
<el-menu-item index="/upload/bydrag">拖拽上传</el-menu-item>
<el-menu-item index="/upload/byhand">手动上传</el-menu-item>
</el-submenu>
<el-menu-item index="2-1">移动端</el-menu-item>
<el-menu-item index="2-2">微信小程序</el-menu-item>
<el-submenu index="2-3">
<template slot="title">PC 端</template>
<el-menu-item index="2-3-1">案例1</el-menu-item>
<el-menu-item index="2-3-2">案例2</el-menu-item>
<el-menu-item index="2-3-3">案例3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="javascript:;" target="_blank" title="target无效">订单管理</a></el-menu-item>
<el-menu-item index="/login">登录</el-menu-item>
<el-menu-item index="/register">注册</el-menu-item>
</el-menu>
</div>
</template>
在上述的.vue文件中,并不需要设置《script》和《style》部分!
唯一需要注意的:(
<el-menu>
开始标签中设置的两处代码,如下)
:default-active="$route.path"
router
附件1:效果图预览:
附件2:文件路径和路由设置,代码截图如下:
设置了上述的两处代码,接着对
<el-menu-item index="" >
配置一下path路径(相关路由配置截图如下),就可以实现页面与navMenu导航组件的对应栏目高亮显示了。
以上就是关于“ Element-ui导航组件NavMenu导航高亮设置 ”的全部内容。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献27条内容
所有评论(0)