简介
element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。
Layout布局(el-row、el-col)
element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下
span属性:表示col所要占领的栅格占比个数。
offset属性:表示col相对偏移的个数。
Container布局容器
这些布局容器,一般充当div来使用。
el-container:外层容器。当子元素中包含 el-header 或 el-footer 时,全部子元素会垂直上下排列,否则会水平左右排列。
el-header:顶栏容器
el-footer:底部栏容器
el-aside:侧边栏容器
el-main:页面主视图
icons的使用
在element-ui 中,图标是用class就可以搞定的。
比如一个编辑的图标就可以如下表示:
按钮(el-button)
按钮是el-button来表示的
按钮是分类的,每一种类型就对应不同的button。
按钮的类型type可取值:’primary’、’success’、’warning’、’info’、’danger’
plain:决定了按钮是否使用素色系列。
round:决定了按钮是不是圆角展示。
默认按钮
主要按钮
成功按钮
警告按钮
默认按钮
默认按钮
级联选择(el-cascader)
//组件
<el-cascader< p="">
:options="options"
v-model="selectedOptions"
@change="handleChange">
//data数据
options: [{
value:'1',
label:'components',
children: [{
label:'input'
},{
label:'swiper'
}]
},{
value:'1',
label:'views'
},{
value:'1',
label:'actions'
}]
TimePicker 时间选择器
picker-options是一个对象。
这个对象的属性有start、step、end、selectableRange等。
当设置selectableRange属性时,它提供了一个时间选择的点。
<el-time-select< p="">
v-model="value1"
:picker-options="{
start:'08:30',
step:'00:15',
end:'18:30'
}"
placeholder="选择时间"
>
日期选择器
日期选择器的type属性,决定选择的类型,这个type可以是date、week、month、year。
<el-date-picker< p="">
v-model="valueDate"
type="date"
placeholder="选择日期">
<el-date-picker< p="">
type='week'
v-model='value'
placeholder='选择周'
>
DateTimePicker 日期时间选择器
本质就是把type改为datetime。
<el-date-picker< p="">
v-model="value1"
type="datetime"
placeholder="选择日期时间">
form表单
element-ui的form表单组件:el-form
element-ui的formItem组件:el-form-item
一个简单的form表单的实现如下:
form表单还有验证:游戏出售平台form的rules就是用来验证使用。
Table 表格
el-table:element-ui的表格。
el-table-column:element-ui的表格所对应的列。
table属性中:stripe属性可以创建带斑马纹的表格。
table属性中:border属性可以创建带斑马纹的表格。
table属性中:height属性可实现固定表头的表格。
<el-table< p="">
:data="tableData"
style="width: 100%"
height="200"
>
Carousel 走马灯
其实就相当于一个轮播
type属性:可以让轮播卡片化
interval属性:定义轮播切换的周期
Collapse 折叠面板
折叠面板的el-collapse-item需要title属性。
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
Navigation 导航
el-menu
el-menu:表示导航菜单的盒子。
el-submenu:表示导航菜单的子盒子选项。
el-menu-item:表示导航菜单的每一项。
其中submenu和munuitem都是用于属性index。
处理中心
选项1
选项2
选项3
订单管理
el-tabs
用户管理
Tree 树形控件
data属性:代表着树形组件的渲染。
Vue学习示例demo
在Vue的学习中,这个体系非常大,包括Vue生命周期、Vue的指令和事件、Vue的组件传值、Vuex、Vue-router等的使用。
一个Vue学习的基础示例的笔记:
github/liwudi/Vue.git
Vue学习的项目演练
一个基于Vue、vuex、axios、vue-router的电商项目模板:
github/liwudi/VueProject.git
github/liwudi/manage-platform.git
联系客服