欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

本文來源于Element官方文檔：

目前成都創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、海西網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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">我的工作臺</template>
      <el-menu-item index="2-1">選項1</el-menu-item>
      <el-menu-item index="2-2">選項2</el-menu-item>
      <el-menu-item index="2-3">選項3</el-menu-item>
      <el-submenu index="2-4">

      <template slot="title">選項4</template>
      <el-menu-item index="2-4-1">選項1</el-menu-item>
      <el-menu-item index="2-4-2">選項2</el-menu-item>
      <el-menu-item index="2-4-3">選項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">選項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">導(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" >
  <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">選項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">
      <span slot="title">選項4</span>
      <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">導(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ù)類型說明可選值默認(rèn)值
mode模式stringhorizontal / verticalvertical
collapse是否水平折疊收起菜單（僅在 mode 為 vertical 時可用）boolean—false
background-color菜單的背景色（僅支持 hex 格式）string—ffffff
text-color菜單的文字顏色（僅支持 hex 格式）string—303133
active-text-color當(dāng)前激活菜單的文字顏色（僅支持 hex 格式）string—409EFF
default-active當(dāng)前激活菜單的 indexstring——
default-openeds當(dāng)前打開的sub-menu的 key 數(shù)組Array——
unique-opened是否只保持一個子菜單的展開boolean—false
menu-trigger子菜單打開的觸發(fā)方式(只在 mode 為 horizontal 時有效)string—hover
router是否使用 vue-router 的模式，啟用該模式會在激活導(dǎo)航時以 index 作為 path 進行路由跳轉(zhuǎn)boolean—false

Menu Methods:

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

Menu Events:

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

SubMenu Attribute:

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

Menu-Item Attribute:

參數(shù)說明類型可選值默認(rèn)值
index唯一標(biāo)志string——
routeVue Router 路徑對象Object——
disabled是否禁用boolean—false

Menu-Group Attribute:

參數(shù)說明類型可選值默認(rèn)值
title分組標(biāo)題string——

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：Element-Ui組件NavMenu導(dǎo)航菜單的具體使用
標(biāo)題URL：http://chinadenli.net/article24/ppgpce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站設(shè)計、做網(wǎng)站、品牌網(wǎng)站設(shè)計、軟件開發(fā)、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司