033_NavMenu导航菜单

最新推荐文章于 2023-12-11 11:05:25 发布
最新推荐文章于 2023-12-11 11:05:25 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： element-ui 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aihiao/article/details/123200649
版权

1. NavMenu导航菜单

1.1. NavMenu导航菜单为网站提供导航功能的菜单。

1.2. Menu Attribute

参数

说明

类型

可选值

默认值

mode

模式

string

horizontal / vertical

vertical

collapse

是否水平折叠收起菜单(仅在mode为vertical时可用)

boolean

无

false

background-color

菜单的背景色(仅支持hex格式)

string

无

#ffffff

text-color

菜单的文字颜色(仅支持hex格式)

string

无

#303133

active-text-color

当前激活菜单的文字颜色(仅支持hex格式)

string

无

#409EFF

default-active

当前激活菜单的index

string

无

无

default-openeds

当前打开的sub-menu的index的数组

Array

无

无

unique-opened

是否只保持一个子菜单的展开

boolean

无

false

menu-trigger

子菜单打开的触发方式(只在mode为horizontal时有效)

string

hover / click

hover

router

是否使用vue-router的模式, 启用该模式会在激活导航时以index作为path进行路由跳转

boolean

无

false

collapse-transition

是否开启折叠动画

boolean

无

true

1.3. Menu Methods

方法名称

说明

参数

open

展开指定的sub-menu

index: 需要打开的sub-menu的index

close

收起指定的sub-menu

index: 需要收起的sub-menu的index

1.4. Menu Events

事件名称

说明

回调参数

select

菜单激活回调

index: 选中菜单项的index, indexPath: 选中菜单项的index path

open

sub-menu展开的回调

index: 打开的sub-menu的index, indexPath: 打开的sub-menu的index path

close

sub-menu收起的回调

index: 收起的sub-menu的index, indexPath: 收起的sub-menu的index path

1.5. SubMenu Attribute

参数

说明

类型

可选值

默认值

index

唯一标志

string/null

无

null

popper-class

弹出菜单的自定义类名

string

无

无

show-timeout

展开sub-menu的延时

number

无

300

hide-timeout

收起sub-menu的延时

number

无

300

disabled

是否禁用

boolean

无

false

popper-append-to-body

是否将弹出菜单插入至body元素。在菜单的定位出现问题时, 可尝试修改该属性

boolean

无

一级子菜单: true / 非一级子菜单: false

1.6. Menu-Item Attribute

参数

说明

类型

可选值

默认值

index

唯一标志

string

无

无

route

Vue Router路径对象

Object

无

无

disabled

是否禁用

boolean

无

false

1.7. Menu-Group Attribute

参数

说明

类型

title

分组标题

string

2. NavMenu导航菜单例子

2.1. 使用脚手架新建一个名为element-ui-navmenu的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import HorizontalNavMenu from '../components/HorizontalNavMenu.vue'
import VerticalNavMenu from '../components/VerticalNavMenu.vue'
import CollapseNavMenu from '../components/CollapseNavMenu.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/HorizontalNavMenu' },
  { path: '/HorizontalNavMenu', component: HorizontalNavMenu },
  { path: '/VerticalNavMenu', component: VerticalNavMenu },
  { path: '/CollapseNavMenu', component: CollapseNavMenu }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建HorizontalNavMenu.vue

<template>
  <div>
    <h1>顶栏-适用广泛的基础用法</h1>
    <h4>导航菜单默认为垂直模式, 通过mode属性可以使导航菜单变更为水平模式。另外, 在菜单中通过submenu组件可以生成二级菜单。Menu还提供了background-color、text-color和active-text-color, 分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。</h4>
    <el-menu :default-active="activeIndex1" 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 href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    <div style="margin-top: 50px;"></div>
    <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <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 href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex1: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

2.4. 在components下创建VerticalNavMenu.vue

<template>
  <div>
    <h1>侧栏-垂直菜单, 可内嵌子菜单</h1>
    <h4>通过el-menu-item-group组件可以实现菜单进行分组, 分组名可以通过title属性直接设定, 也可以通过具名slot来设定。</h4>
    <el-row>
      <el-col :span="3">
        <h5>默认颜色</h5>
        <el-menu default-active="2" @open="handleOpen" @close="handleClose">
          <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" disabled>
            <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-col :offset="2" :span="3">
        <h5>自定义颜色</h5>
        <el-menu default-active="2" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <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" disabled>
            <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>
  </div>
</template>

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

2.5. 在components下创建CollapseNavMenu.vue

<template>
  <div>
    <h1>折叠</h1>
    <h4>collapse是否水平折叠收起菜单(仅在mode为vertical时可用)</h4>
    <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" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</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">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <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>
  </div>
</template>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

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

2.6. 运行项目, 访问http://localhost:8080/#/HorizontalNavMenu

2.7. 运行项目, 访问http://localhost:8080/#/VerticalNavMenu 

2.8. 运行项目, 访问http://localhost:8080/#/CollapseNavMenu 

VUE-Element组件（二）NavMenu导航菜单
w_t_y_y的博客
04-09 1万+
navmenu组件
vue2，vue3 的 NavMenu 导航菜单，Tabs 标签页与Breadcrumb 面包屑
最新发布
vdjskshvd的博客
04-27 560
【代码】vue2，vue3 的 NavMenu 导航菜单，Tabs 标签页与Breadcrumb 面包屑。
ElementUI浅尝辄止32：NavMenu 导航菜单
渣渣砖
09-06 2052
为网站提供导航功能的菜单。
navmenu导航菜单
weixin_46852620的博客
01-31 376
<template> <el-container class="home-container"> <div @click="toggleCollapse">|||</div> <!-- 侧边栏菜单区域 --> <el-menu background-color="#333744" text-color="#fff" active-t
VUE-Element组件（二）NavMenu导航菜单--层级关系
w_t_y_y的博客
05-25 3210
NavMenu第一篇的几个例子，固定的菜单中菜单层级是在<el-menu>只写死的，动态菜单权限中层级也是由后台代码排好的(父子关系)，到前端接收的menuList可以直接循环渲染了。现在后端只传回有权限的菜单编码，层级关系放在前端路由配置，然后根据路由与后端返回的菜单编码过滤用户权限。 一、多级路由：之前的路由均为二级路由（当然也可以写成多级路由），如果需要配置多级路由，嵌套多层children就可以了，其次要注意component。最外层component指向导航页即NavMenu菜单页面
Element -Ui之NavMenu导航栏
m0_50007683的博客
05-03 1万+
一、NavMenu重要标签和参数说明 mode：导航栏的模式，默认值vertical 导航栏处于垂直状态，改为horizonta可变为水平模式。 index：唯一标志。 default-active：激活当前菜单的index。 router： 是否使用路由，启用后可以通过index作为地址进行跳转。 <el-menu-item index="1">导航栏中的子菜单标签。 <el-submenu> 生成二级菜单。 代码实现..
Element NavMenu导航菜单的使用方法
10-15
Element UI的NavMenu导航菜单是前端开发中常用的一个组件，尤其在构建Web应用的侧边栏或顶部导航时。这个组件提供了丰富的样式和交互功能，能够帮助开发者快速创建出美观且易于使用的导航结构。 首先，让我们了解...
WordPress导航菜单函数wp_nav_menu()详解
09-29
在WordPress的开发中，wp_nav_menu()是一个非常重要的函数，它用于实现和定制网站的导航菜单系统。自WordPress版本3.0起，该函数成为标准，取代了旧有的 wp_list_pages() 和 wp_page_menu()，为开发者提供了更灵活的...
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于各种类型的应用场景。 ### 基础用法 1. **水平导航菜单**： 在水平模式下，`el-menu`组件可以通过`:default-active`...
NavMenu导航控件 后台左控导航
12-12
.控件开发背景 我们在做项目的时候经常会遇到要做后台管理界面，一般都是用Fram框架来实现，框架的左面是一个导航栏，关键就是这个导航栏，是用TreeView控件，还是自己写JS脚本，用TreeView吧影响美观，写JS吧，太多了，麻烦。为了不用TreeView又省去写JS的麻烦，所以就有了 把以前写好的JS脚本封装成Asp.Net 服务器控件的想法。 本控件主要有几个重点。 （a).TypeConverter的实现。 (b).Editor的实现。 (c).NavMenuDesigner的实现.
NavMenu 导航菜单
weixin_65019617的博客
08-22 137
【代码】NavMenu 导航菜单。
NavMenu菜单控件
04-17
一个很好很漂亮的NavMenu菜单控件 大家可以下下来用用
NavMenu 导航菜单 与 el-tabs 标签页关联
Li8L9xF的博客
08-03 1527
NavMenu 导航菜单与Tabs 标签页导航关联
element 中NavMenu 导航菜单 的使用
LJ_James_的博客
12-11 330
default-active="active" 这个属性是刷新浏览器进来的时候进入的menu的菜单，与el-menu-item的 :key 相关，不存在子菜单的直接使用<el-menu-item></el-menu-item>注意不会与el-submenu的 :key相关，存在子菜单的使用外面使用一层submenu。
element-ui NavMenu 导航菜单 垂直菜单，可内嵌子菜单 使用
王燕欣的博客
07-22 2217
必要环境为 vue + vue-router +element 此文件只是左侧菜单组件，需要更多功能请参考element-ui 官网的 NavMenu 导航菜单 LeftAsideNav.vue 文件 <template> <div class="ku-aside-assembly"> <div class="ku-menu-lsit"> <el-menu :default-active="NavigationDefaul
Navigation-NavMenu 导航菜单
hrbsfdxzhq01的博客
01-25 2110
  &lt;!-- 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了 background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。 --&gt; &lt;div id="app"&gt; &lt;el...
漂亮的NavMenu导航控件
01-21 180
1.控件开发背景 我们在做项目的时候经常会遇到要做后台管理界面，一般都是用Fram框架来实现，框架的左面是一个导航栏，关键就是这个导航栏，是用TreeView控件，还是自己写JS脚本，用TreeView吧影响美观，写JS吧，太多了，麻烦。为了不用TreeView又省去写JS的麻烦，所以就有了 把以前写好的JS脚本封装成Asp.Net 服务器控件的想法。 2.实现效果 ...
Element UI样式修改之NavMenu导航菜单
热门推荐
qq_42750982的博客
03-25 1万+
Element UI样式修改之NavMenu导航菜单 一、成果展示 Element UI官网给出的例子如图一，我想要改变导航栏文字右边的三角图标成图二的样式： 图一 图二 二、步骤 1.首先将官网的例子复制到你的项目里面去，运行起来，鼠标右击选择检查： 2.打开Element UI图标的网页，然后右击选择检查，按照上图步骤就可以看到我们想要的图标的样式： 3.最后在<style></style>中添加以下代码即可达...
Element UI：NavMenu 导航菜单实战指南
本文主要探讨了Element UI框架中的NavMenu导航菜单组件的使用方法，通过实例代码详细解析了如何创建和配置水平模式的导航菜单，包括菜单项、子菜单及禁用状态的设置，旨在帮助开发者提升其在网页应用开发中的实践...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值