Element UI学习4--NavMenu 导航菜单

1、顶栏

导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。
在菜单中通过submenu组件可以生成二级菜单。

<tamplate>
<div>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><!-- select  菜单激活回调  index: 选中菜单项的 index, indexPath: 选中菜单项的 index path--><el-submenu index="1"><template slot="title">水果</template><el-menu-item index="1-1">草莓</el-menu-item><el-menu-item index="1-2">芒果</el-menu-item><el-menu-item index="1-3">哈密瓜</el-menu-item><el-menu-item index="1-4">西瓜</el-menu-item><el-menu-item index="1-5">葡萄</el-menu-item></el-submenu><el-submenu index="2"><template slot="title">蔬菜</template><el-menu-item index="2-1">青菜</el-menu-item><el-menu-item index="2-2">油麦菜</el-menu-item><el-menu-item index="2-3">菠菜</el-menu-item><el-menu-item index="2-4">空心菜</el-menu-item></el-submenu><el-submenu index="3"><template slot="title">饮料</template><el-submenu index="3-1"><template slot="title">可乐</template><el-menu-item index="3-1-1">小</el-menu-item><el-menu-item index="3-1-2">中</el-menu-item><el-menu-item index="3-1-3">大</el-menu-item></el-submenu><el-menu-item index="3-2">玉米汁</el-menu-item><el-menu-item index="3-3">西瓜汁</el-menu-item><el-menu-item index="3-4">橙汁</el-menu-item></el-submenu><el-menu-item index="4">消息中心</el-menu-item><el-menu-item index="5">订单管理</el-menu-item></el-menu>
</div>
</template>

export default {data() {return {activeIndex: '1',};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}}

如图：

Menu 还提供了background-color（菜单的背景色）
text-color（菜单的文字颜色）
active-text-color（当前激活菜单的文字颜色）

el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenu index="1"><template slot="title">水果</template><el-menu-item index="1-1">草莓</el-menu-item><el-menu-item index="1-2">芒果</el-menu-item><el-menu-item index="1-3">哈密瓜</el-menu-item><el-menu-item index="1-4">西瓜</el-menu-item><el-menu-item index="1-5">葡萄</el-menu-item></el-submenu><el-submenu index="2"><template slot="title">蔬菜</template><el-menu-item index="2-1">青菜</el-menu-item><el-menu-item index="2-2">油麦菜</el-menu-item><el-menu-item index="2-3">菠菜</el-menu-item><el-menu-item index="2-4">空心菜</el-menu-item></el-submenu><el-submenu index="3"><template slot="title">饮料</template><el-submenu index="3-1"><template slot="title">可乐</template><el-menu-item index="3-1-1">小</el-menu-item><el-menu-item index="3-1-2">中</el-menu-item><el-menu-item index="3-1-3">大</el-menu-item></el-submenu><el-menu-item index="3-2">玉米汁</el-menu-item><el-menu-item index="3-3">西瓜汁</el-menu-item><el-menu-item index="3-4">橙汁</el-menu-item></el-submenu><el-menu-item index="4">消息中心</el-menu-item><el-menu-item index="5">订单管理</el-menu-item></el-menu>

如图：

2、侧栏

<el-row class="tac"><el-col :span="12"><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"><!-- open  sub-menu 展开的回调   index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index pathclose  sub-menu 收起的回调  index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path --><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3"><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></el-col></el-row>

<script>export default {methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
</script>

如图：

3、折叠

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"><el-radio-button :label="false">展开</el-radio-button><el-radio-button :label="true">收起</el-radio-button></el-radio-group><el-row class="tac"><el-col :span="12"><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose":collapse="isCollapse"><!-- open   sub-menu 展开的回调   index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index pathclose  sub-menu 收起的回调  index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path --><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3"><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></el-col></el-row>

<script>export default {data() {return {isCollapse: true};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
</script>

如图：

Element UI学习4--NavMenu 导航菜单相关推荐

Element UI样式修改之NavMenu导航菜单
目录 Element UI样式修改之NavMenu导航菜单一.成果展示二.步骤三.完整代码 Element UI样式修改之NavMenu导航菜单一.成果展示 Element UI官网给出的例子 ...
element菜单组件样式修改NavMenu导航菜单
NavMenu导航菜单 1.选中菜单的颜色 .el-menu-item.is-active {background-color: #41a3fb !important; } 2.菜单hover颜色 . ...
Elementui NavMenu 导航菜单使用
官方文档https://element.eleme.cn/#/zh-CN/component/menu NavMenu 导航菜单官方使用项目实例官方使用 <el-menu :default ...
ElementUi中NavMenu 导航菜单router用法
问题引出写页面中遇到需要写NavMenu 导航菜单,作为菜鸟按照Element官方的NavMenu 导航菜单用法,传统式使用在data声明一个activeIndex作为跳转的首页,当我点击NavMe ...
Element UI学习记录之布局
目录 Element UI学习记录之布局一.Layout布局二.Container布局容器 Element UI学习记录之布局一.Layout布局基本概念:一行通过分割为24栅格栏进行布局,如 ...
vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
vue element UI 学习总结笔记（九）_ 导航菜单与路由
获取用户信息我们把 login和get_user_info两件事分开处理,我们在守卫路由中获取路由信息. router.beforeEach((to, from, next) => {if ( ...
element-ui NavMenu 导航菜单通过一个按钮控制
element -ui 里导航菜单是通过两个按钮控制的,但实际开发中很多情况是通过一个按钮来toggle,而且有一个坑就是elemnt ui NavMenu的el-radio-butto 不是clic ...
Element UI学习6--Carousel 走马灯
轮播是前端页面运用的比较广泛的一个功能. 在有限空间内,循环播放同一类型的图片.文字等内容. 今天主要学习了Element UI中Carousel 走马灯这一功能的使用方法. 1.基础用法 1.默认 ...

Element UI学习4--NavMenu 导航菜单

1、顶栏

2、侧栏

3、折叠

Element UI学习4--NavMenu 导航菜单相关推荐

最新文章

热门文章