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"><!-- opensub-menu 展开的回调 index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index pathclosesub-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"><!-- opensub-menu 展开的回调 index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index pathclosesub-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>

如图：