Vue实战篇十六:导航菜单
系列文章目录
Vue基础篇一:编写第一个Vue程序
Vue基础篇二:Vue组件的核心概念
Vue基础篇三:Vue的计算属性与侦听器
Vue基础篇四:Vue的生命周期(秒杀案例实战)
Vue基础篇五:Vue的指令
Vue基础篇六:Vue使用JSX进行动态渲染
Vue提高篇一:使用Vuex进行状态管理
Vue提高篇二:使用vue-router实现静态路由
Vue提高篇三:使用vue-router实现动态路由
Vue提高篇四:使用Element UI组件库
Vue提高篇五:使用Jest进行单元测试
Vue提高篇六: 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一: 使用Vue搭建注册登录界面
Vue实战篇二: 实现邮件验证码发送
Vue实战篇三:实现用户注册
Vue实战篇四:创建多步骤表单
Vue实战篇五:实现文件上传
Vue实战篇六:表格渲染动态数据
Vue实战篇七:表单校验
Vue实战篇八:实现弹出对话框进行交互
Vue实战篇九:使用省市区级联选择插件
Vue实战篇十:响应式布局
Vue实战篇十一:父组件获取子组件数据的常规方法
Vue实战篇十二:多项选择器的实际运用
Vue实战篇十三:实战分页组件
Vue实战篇十四:前端excel组件实现数据导入
Vue实战篇十五:表格数据多选在实际项目中的技巧
Vue实战篇十六:导航菜单
文章目录
- 系列文章目录
- 一、背景
- 二、Element Navbar
- 2.1 顶栏模式
- 三、实战演示
一、背景
- 导航菜单顾名思义即是为网站提供导航功能的组件:
- 在中后台管理系统中,我们一般会应用导航菜单、路由及后台权限,形成用户菜单栏。
- 同时,导航菜单也可以为网站建立导航栏,引导网站访问进行相应的网页浏览, 本文将通过Element Navbbar组件进行实战演示。
二、Element Navbar
2.1 顶栏模式
- 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。
<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 href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu:default-active="activeIndex2"class="el-menu-demo"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>
三、实战演示
- 创建网站的顶栏导航条:
- 最左边为网站logo
- 从logo从左往右为各个导航功能
- 搜索栏
- 最右边为消息中心及个人中心图标。
<template><div><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"@select="handleSelect"><!-- 自定义logo组件 --><el-menu-item index="0"> <Logo :collapse="false" /></el-menu-item><el-menu-item index="1">产品开发</el-menu-item><el-menu-item index="2">材料开发</el-menu-item><el-menu-item index="3">平台开发</el-menu-item><el-menu-item index="4">知识沉淀</el-menu-item><el-menu-item index="5">知识地图</el-menu-item><el-menu-item index="50"><i class="el-icon-search" /><el-input v-model="keyWord" size="mini" placeholder="搜索" /></el-menu-item><el-menu-item index="60" style="float:right;"><div><el-tooltip content="消息中心" effect="dark" placement="bottom"><img :src="Message" class="user-avatar" /></el-tooltip><el-tooltip content="个人中心" effect="dark" placement="bottom"><img :src="Avatar" class="user-avatar" /></el-tooltip></div></el-menu-item></el-menu></div>
</template>
<script>
import Logo from './Logo'
import Avatar from '@/assets/images/avatar.png'
import Message from '@/assets/images/message.png'
export default {components: { Logo },data() {return {Avatar: Avatar,Message: Message,activeIndex: '1',keyWord: ''}},methods: {handleSelect(key, keyPath) {console.log(key, keyPath)}}
}
</script>
<style lang="scss" scoped>.user-avatar {margin-left: 5px;cursor: pointer;width: 40px;height: 40px;border-radius: 10px;}
</style>
Vue实战篇十六:导航菜单相关推荐
- Vue实战篇二十六:创建动态仪表盘
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- Vue实战篇二十八:实现一个手机版的购物车
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- Vue实战篇二十九:模拟一个简易留言板
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- Vue实战篇三十:实现一个简易版的头条新闻
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- Vue实战篇三十三:实现新闻的浏览历史
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- Vue实战篇三十一:实现一个改进版的头条新闻
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- Vue实战篇二十七:实现走马灯效果的商品轮播图
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- Vue实战篇十七:用树型组件实现一个文档目录结构
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- SAS数据挖掘实战篇【六】
SAS数据挖掘实战篇[六] 6.3 决策树 决策树主要用来描述将数据划分为不同组的规则.第一条规则首先将整个数据集划分为不同大小的 子集,然后将另外的规则应用在子数据集中,数据集不同相应的规则也不同 ...
最新文章
- python官网下载步骤图解-下载及安装Python详细步骤
- vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标
- create view必须是批处理中仅有的语句_sqlserver 脚本和批处理指令小结
- python程序结构有哪几种_三、python程序结构之分支结构
- matlab if m不等于0,matlab问题clearfor a=0.1:0.1:50for b=0.1:0.1:20for m=0.1:0.1:5
- yii mysql gii_Yii Gii使用
- ffmpeg音视频基础知识
- 作者:朱凤华,男,博士,现任中国科学院自动化研究所副研究员,中国科学院云计算中心自动化所东莞研究院副院长。...
- 次世代的会话管理项目 Spring Session
- Mac OS X Yosemite安装Hadoop 2.6记录
- ZED2+ORB_SLAM3
- Excel下拉框多选(支持再次选择已选项会取消选择)
- hlw8012arduino代码_麻雀虽小五脏俱全-liteduino arduino开发板PCB文件
- 如何批量删除Word中向下箭头的符号
- linux 帝国cms 刷新,帝国cms怎么自动刷新网站首页?(帝国CMS自动刷新首页的方法)...
- BigDecimal舍入模式(Rounding Modes)
- 单页双曲面 matlab,在matlab中画函数(x^2+y^2)/9-z^2/4=1的旋转单叶双曲面
- 北京上地海淀IDC数据中心机房托管-永丰数据中心
- Ubuntu虚拟机没有网络图标或者无法获取IP地址
- 实验六 移位寄存器及其应用
热门文章
- 什么是jQuery Mobile
- Clion使用笔记(C语言、C++、stm32)
- 【SSO单点登录】ticket+token+redis 实现sso单点登录 防重放、防盗用、防篡改
- [附源码]计算机毕业设计Python+uniapp医养结合养老APP的设计与实现a7rv0(程序+lw+APP+远程部署)
- 1.orientDB 了解
- android 三星打印机,三星发布全球首款Android打印机
- 基于 Debian 的 Linux 中文操作系统
- windows验证redis/RabbitMQ安装是否成功
- 数据结构课程设计-——文章编辑(C语言编写)
- RPMforge(Repoforge)源