大事件项目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 进行提交

相关文章
|
9月前
|
JavaScript
Vue 项目中实现在所有页面固定一个全局对话栏组件
Vue 项目中实现在所有页面固定一个全局对话栏组件
83 0
|
JavaScript 前端开发
vue中在父组件点击按钮触发子组件的事件
vue中在父组件点击按钮触发子组件的事件
748 0
vue中在父组件点击按钮触发子组件的事件
|
JavaScript
vue2中左侧菜单和头部tab标签联动
vue2中左侧菜单和头部tab标签联动
248 0
|
数据处理 网络架构
ElementUI - 主页面--动态树&右侧内容管理
ElementUI - 主页面--动态树&右侧内容管理
104 0
|
小程序 算法 前端开发
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】
vue3的动态组件 component (点击顶部切换下面展示对应的组件内容)
vue3的动态组件 component (点击顶部切换下面展示对应的组件内容)
1069 0
vue3的动态组件 component (点击顶部切换下面展示对应的组件内容)
|
JavaScript 定位技术
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
1136 0
|
JavaScript
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
410 0
|
前端开发
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
|
容器
写了个自定义指令,支持elementUI2.0下拉框组件虚拟列表显示
由于业务对页面性能要求很高,如果下拉框数据很大,一个页面有多个下拉框,那么就导致页面很卡顿。由于elementPlus已经支持了下拉组件虚拟列表,但所在项目仍然使用elementUI2.0,所以需要自己扩展支持下拉组件虚拟列表
668 0
写了个自定义指令,支持elementUI2.0下拉框组件虚拟列表显示