vue学习的第八天——elementUI的使用
第一步在vue项目下安装ElementUInpmielement-ui-S//安装element-uinpminstallsass-loadernode-sass--save-dev//安装sass加载器sass加载器就不截图了。。。。第二步在main.js引入elementui下面导入了一个css文件需要到sass加载器,这就上面为啥导入了一个sass第三步去到elementui官网1.找到想要
前言:Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,通过使用Element可以大大加速前端的开发速度,节省了脑力与时间。
第一步:在vue项目下安装ElementUI
npm i element-ui -S //安装element-ui
npm install sass-loader node-sass --save-dev //安装sass加载器
sass加载器就不截图了。。。。
第二步:在main.js引入elementui
下面导入了一个css文件需要到sass加载器,这就上面为啥导入了一个sass
第三步:去到elementui官网 Element - The world's most popular Vue UI framework
1.找到想要的组件,点击显示代码
2.在views先新创建一个文件,在复制上面的代码粘贴到<template>标签间(有些要嵌套到div中不然报错,且样式部分和js部分记得要分开复制粘贴)
3.结果展示
ps:导航菜单详解:
el-aside为侧 el-main为显示部分
el-aside中的 el-menu属性设置
:default-active="$route.path" :设置组件按钮点击之后,显示的效果不会因为页面的刷新而重置
:router=“true” : 设置路由按钮可以跳转显示路由
el-menu-item 的 index 属性为设置 路由跳转的 路径
el-main中 : 设置一个 router-view 来展示路由
我的总结:首先用el-container写一个大框,大框里面写el-aside代表左框,el-header代表头部的,el-main代表主要展示页面,el-footer代表底部框。(要是不需要其中哪个框直接不写哪个框就好了,除了el-container,其他框要是像写成上图一样的排版一样直接同级并列就行)
el-menu属性列举:
-
首页效果为
el-menu
中嵌套el-menu-item
,el-menu-item
中左侧图标填充,右侧文字填充 -
部门效果为
el-menu
嵌套el-submenu
,el-submenu
嵌套el-menu-item
-
窗口效果为
el-menu
嵌套el-submenu
,el-submenu
嵌套el-menu-item-group
,el-menu-item-group
嵌套el-menu-item
,达到分组效果 -
图标填充和分组效果都需要在
slot
指定title
的标签内实现 -
default-active
指定默认的导航栏选项,对应el-menu-item
的index
属性 -
mode
指定导航栏的纵横向显示,horizontal/vertical
-
@select
在el-menu-item
被选中时触发 -
background-color
指定导航栏背景色 -
text-color
指定文本颜色 -
active-text-color
指定选中导航栏文本颜色 -
collapse
控制垂直导航栏的折叠 -
unique-opened
控制只能让一个导航菜单可以展开,其他的收缩
更多推荐
所有评论(0)