github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity
element/examples/docs/menu.md

9.4 KiB
Raw Blame History

基础用法

Element

处理中心 我的工作台 订单管理 
<div class="nav">
  <h1>Element</h1>
  <el-menu active-key="1">
    <el-menu-item key="1">处理中心</el-menu-item>
    <el-menu-item key="2">我的工作台</el-menu-item>
    <el-menu-item key="3">订单管理</el-menu-item>
  </el-menu>
  <div class="nav-right">
    <el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
    <span class="nav__button is-unread">
      <i class="el-icon-message"></i>
    </span>
    <span class="nav__button">
      <i class="el-icon-setting"></i>
    </span>
  </div>
</div>

Element

处理中心 我的工作台 订单管理 
<div class="nav nav-dark">
  <h1>Element</h1>
  <el-menu theme="dark" active-key="1">
    <el-menu-item key="1">处理中心</el-menu-item>
    <el-menu-item key="2">我的工作台</el-menu-item>
    <el-menu-item key="3">订单管理</el-menu-item>
  </el-menu>
  <div class="nav-right">
    <el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
    <span class="nav__button is-unread">
      <i class="el-icon-message"></i>
    </span>
    <span class="nav__button">
      <i class="el-icon-setting"></i>
    </span>
  </div>
</div>

侧边栏导航

Element

导航一 导航二 选项1 选项2 选项3 导航三 选项1 选项2 选项3 
<div class="nav nav-vertical">
  <h1>Element</h1>
  <el-menu mode="vertical" active-key="2-1">
    <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
    <el-submenu key="sub1">
      <template slot="title"><i class="el-icon-menu"></i>导航二</template>
      <el-menu-item key="2-1">选项1</el-menu-item>
      <el-menu-item key="2-2">选项2</el-menu-item>
      <el-menu-item key="2-3">选项3</el-menu-item>
    </el-submenu>
    <el-submenu key="sub2">
      <template slot="title"><i class="el-icon-setting"></i>导航三</template>
      <el-menu-item key="3-1">选项1</el-menu-item>
      <el-menu-item key="3-2">选项2</el-menu-item>
      <el-menu-item key="3-3">选项3</el-menu-item>
    </el-submenu>
  </el-menu>
</div>

Element

导航一 导航二 选项1 选项2 选项3 导航三 选项1 选项2 选项3 导航四 选项1 选项2 选项3 导航五 选项1 选项2 选项3 
<div class="nav nav-vertical nav-dark">
  <h1>Element</h1>
  <el-menu mode="vertical" theme="dark" active-key="3-1">
    <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
    <el-submenu key="sub1">
      <template slot="title"><i class="el-icon-menu"></i>导航二</template>
      <el-menu-item key="2-1">选项1</el-menu-item>
      <el-menu-item key="2-2">选项2</el-menu-item>
      <el-menu-item key="2-3">选项3</el-menu-item>
    </el-submenu>
    <el-submenu key="sub2">
      <template slot="title"><i class="el-icon-setting"></i>导航三</template>
      <el-menu-item key="3-1">选项1</el-menu-item>
      <el-menu-item key="3-2">选项2</el-menu-item>
      <el-menu-item key="3-3">选项3</el-menu-item>
    </el-submenu>
  </el-menu>
</div>

menu API

参数 说明 类型 可选值 默认值
mode 模式 string horizontal,vertical horizontal
theme 主题色 string light,dark light
activeKey 当前激活菜单的 key string
openedKeys 当前打开的submenu的 key 数组 Array
uniqueOpend 是否只保持一个子菜单的展开 boolean true, false false
router 是否使用 vue-router 的模式，启用该模式会在 select 事件触发时执行 this.$route.$router.go(key) 进行路由跳转 boolean true, false false
select 菜单激活回调 function(key, keyPath)
open SubMenu 展开的回调 function(key, keyPath)
close SubMenu 收起的回调 function(key, keyPath)

submenu API

参数 说明 类型 可选值 默认值
key 唯一标志 string

menu-item API

参数 说明 类型 可选值 默认值
key 唯一标志 string