大事件项目12--侧边栏导航的组件标签准备

简介: 大事件项目12--侧边栏导航的组件标签准备

从上往下,从左往右1、这里我获取到了保存到了Vuex里,通过getter保存到了页面里

1、看一下设计图,里面用的导航

2、用这个作为深色的背景

3、row叫行,col叫列

4、el-menu这一块进行复制

5、绑定在下面左侧边栏这一块区域

6、现在看到左侧样式已经出来

7、修改背景色修改指定区域就行

8、背景颜色可以改成这样

9、背景色样式

10、el-emnu:相关介绍

11、有嵌套用这个

12、现在我们要修正成这个样式

13、这个ELEMENT-UI为你提供了一些商标

14、这里有一个小房子

15、这个商标怎么用?先来个i标签,然后来一个对应的class就行

16、写一个数字

17、这个地方要修改一下?

18、文章管理

19、分类两个

20、将导航的侧边栏标签准备完毕

21、还有一个注意点,只有一个注意点

22、同一时间内只能展开一个

23、同一时间内,只能展开一个

24、这里是Menu的代码区

25、回到代码区加上就行,没有显示传值,默认就是true

26、最后git 进行提交

相关文章
|
2月前
|
JavaScript
Vue 项目中实现在所有页面固定一个全局对话栏组件
Vue 项目中实现在所有页面固定一个全局对话栏组件
37 0
|
2月前
|
JSON 数据格式
uniapp自定义头部导航样式
uniapp自定义头部导航样式
128 0
|
9月前
|
JavaScript 前端开发 Java
68jqGrid - 自定义层级图标
68jqGrid - 自定义层级图标
19 0
|
2月前
Bootstrap5 导航组件和面包屑
Bootstrap5 导航组件和面包屑
31 0
|
12月前
|
JavaScript
vue2中左侧菜单和头部tab标签联动
vue2中左侧菜单和头部tab标签联动
141 0
|
8月前
|
数据处理 网络架构
ElementUI - 主页面--动态树&右侧内容管理
ElementUI - 主页面--动态树&右侧内容管理
54 0
vue3的动态组件 component (点击顶部切换下面展示对应的组件内容)
vue3的动态组件 component (点击顶部切换下面展示对应的组件内容)
882 0
vue3的动态组件 component (点击顶部切换下面展示对应的组件内容)
|
JavaScript
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
363 0
|
前端开发
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
|
前端开发
bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结
bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结