Element-Ui組件 NavMenu 導(dǎo)航菜單的具體使用

更新時(shí)間：2019年10月24日 11:07:23 作者：小丶侯

這篇文章主要介紹了Element-Ui組件 NavMenu 導(dǎo)航菜單的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文來(lái)源于Element官方文檔：

http://element-cn.eleme.io/#/zh-CN/component/menu

基礎(chǔ)用法

普通導(dǎo)航菜單

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">處理中心</el-menu-item>
    <el-submenu index="2">

      <template slot="title">我的工作臺(tái)</template>
      <el-menu-item index="2-1">選項(xiàng)1</el-menu-item>
      <el-menu-item index="2-2">選項(xiàng)2</el-menu-item>
      <el-menu-item index="2-3">選項(xiàng)3</el-menu-item>
      <el-submenu index="2-4">

      <template slot="title">選項(xiàng)4</template>
      <el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item>
      <el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item>
      <el-menu-item index="2-4-3">選項(xiàng)3</el-menu-item>
   </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a  rel="external nofollow" target="_blank">訂單管理</a></el-menu-item>
</el-menu>

垂直導(dǎo)航條

<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>導(dǎo)航一</span>
    </template>
    <el-menu-item-group>
      <template slot="title">分組一</template>
      <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
      <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分組2">
      <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <template slot="title">選項(xiàng)4</template>
      <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">導(dǎo)航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">導(dǎo)航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">導(dǎo)航四</span>
  </el-menu-item>
</el-menu>

折疊導(dǎo)航條

<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-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">導(dǎo)航一</span>
    </template>
    <el-menu-item-group>
      <span slot="title">分組一</span>
      <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
      <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分組2">
      <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">選項(xiàng)4</span>
      <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">導(dǎo)航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">導(dǎo)航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">導(dǎo)航四</span>
  </el-menu-item>
</el-menu>

Menu Attribute：

參數(shù)	類型	說(shuō)明	可選值	默認(rèn)值
mode	模式	string	horizontal / vertical	vertical
collapse	是否水平折疊收起菜單（僅在 mode 為 vertical 時(shí)可用）	boolean	—	false
background-color	菜單的背景色（僅支持 hex 格式）	string	—	ffffff
text-color	菜單的文字顏色（僅支持 hex 格式）	string	—	303133
active-text-color	當(dāng)前激活菜單的文字顏色（僅支持 hex 格式）	string	—	409EFF
default-active	當(dāng)前激活菜單的 index	string	—	—
default-openeds	當(dāng)前打開的sub-menu的 key 數(shù)組	Array	—	—
unique-opened	是否只保持一個(gè)子菜單的展開	boolean	—	false
menu-trigger	子菜單打開的觸發(fā)方式(只在 mode 為 horizontal 時(shí)有效)	string	—	hover
router	是否使用 vue-router 的模式，啟用該模式會(huì)在激活導(dǎo)航時(shí)以 index 作為 path 進(jìn)行路由跳轉(zhuǎn)	boolean	—	false

Menu Methods:

事件名稱	說(shuō)明	參數(shù)
open	展開指定的 sub-menu index:	需要打開的 sub-menu 的 index
close	收起指定的 sub-menu index:	需要收起的 sub-menu 的 index

Menu Events:

事件名稱	說(shuō)明	回調(diào)參數(shù)
select	菜單激活回調(diào)	index: 選中菜單項(xiàng)的 index, indexPath: 選中菜單項(xiàng)的 index path
open	sub-menu 展開的回調(diào)	index: 打開的 sub-menu 的 index， indexPath: 打開的 sub-menu 的 index path
close	sub-menu 收起的回調(diào)	index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path

SubMenu Attribute:

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
mode	唯一標(biāo)志	string	—	—
mode	彈出菜單的自定義類名	string	—	—
mode	展開 sub-menu 的延時(shí)	number	—	300
mode	收起 sub-menu 的延時(shí)	number	—	300
mode	是否禁用	boolean	—	false