Container容器:用于布局的容器组件,方便快速的搭建页面的基本结构
<el-container>:外层容器,当子元素中包含<el-header>或<el-footer>时,全部子元素会垂直上下排列,否则会水平左右排列
<el-header>:顶部容器
<el-aside>: 侧边栏容器
<el-main>: 主要区域容器
<el-footer>: 底部容器
以上组件采用了flex布局,使用前请确认目标浏览器是否兼容,此外,<el-container>的子元素只能是后四者,后四者的父元素也只能是<el-container>
Basic组件规范:
颜色:主色,辅助色,中性色
字体:字体,字号,行高
边框:实线,虚线,圆角,投影
Button按钮
Button按钮和Link文字一样,有固定的样式
<el-button type="primary" >按钮</el-button>
使用plain属性,可以实现镂空效果,使用disabled属性,可以禁用:
<el-button type="primary" plain ></el-button>
PS:round实现椭圆,circle实现圆;
使用type="text"可以将button转换成纯文本按钮:
<el-button type="text">文字按钮</el-button>
使用<el-button-group>可以将多个按钮设置成组合按钮:
<el-button-group>
<el-button class="el-icon-arrow-left">上一页</el-button>
<el-button>下一页<i class="el-icon-arrow-right"/></el-button>
</el-button-group>
使用 :loading="true"实现加载中的效果
<el-button :loading="true" type="primary">加载中</el-button>
使用size="small"等属性,实现三种大小:
<el-button type="info" size="mini">按钮</el-button>
Radio和Checkbox
1.单选框radio
<el-radio v-model="sex" label="1">男</el-radio>
<el-radio v-model="sex" label="2">女</el-radio>
data(){
return {
sex : '1'
}
}
PS: 这里v-model和sex进行双向绑定,label相当于value,且和sex值一致则首选;
2. 使用群组单选框,可以将双向绑定置顶操作,具体如下:
<el-radio-group v-model="city">
<el-radio :label="1">北京</el-radio>
<el-radio :label="2">上海</el-radio>
<el-radio :label="3">广州</el-radio>
</el-radio-group>
data(){
return {
city : 1
}
}
PS: 如果想禁用设置:disabled; 如想带有边框设置:border;
3.可以使用el-radio-button实现按钮式单选框,size可以设置大小
<el-radio-button label="1" >北京</el-radio-button>
PS: 可以在群组el-radio-button设置size属性,值为:medium/ samll /mini;
4.单选框或群组单选都具有change事件,改变后即可出发;
<el-radio-group v-model="city" @change="radioChange">
Checkbox复选框
<el-checkbox-group v-model="checkList">
<el-checkbox label="音乐"></el-checkbox>
<el-checkbox label="体育"></el-checkbox>
<el-checkbox label="电脑"></el-checkbox>
</el-checkbox-group>
return {
checkList :['音乐','体育']
}
PS:单一复选框,比如协议确定,就直接使用el-checkbox不需要群组;
6.使用 :max/ :min,可选择最大/最小的勾选数量;
<el-checkbox-group v-model="checkList" :max="2"></el-checkbox-button>
7.和单选框一样,支持使用el-checkbox-button样式;
<el-checkbox-button label="音乐"></el-checkbox-button>
8.事件和radio一样,支持change, 具体如下:
<el-checkbox-group v-model="checkList" @change="radioChange"></el-checkbox-button>
PS: 其余和单选框类似,注意button样式和普通样式的属性区别;
Input输入框
基础输入框Input,带双向绑定;
<el-input v-model="input" placeholder="请输入内容"></el-input>
data() {
return {
input : ' '
}
}
使用clearable属性,提供框内清空按钮,使用show-password实现密码框;
<el-input v-model="input" clearable></el-input>
<el-input v-model="input" show-password></el-input>
使用maxlength属性,设置输入限制;
<el-input v-model="input" maxlength="10" show-word-limit></el-input>
使用prefix-icon设置前缀内置图标;使用suffix-icon设置后缀内置图标;
前置图标:<el-input prefix-icon="el-icon-search"></el-input>
后置图标:<el-input suffix-icon="el-icon-date"></el-input>
PS: 支持slot方式,具体如下:
<el-input>
<i slot="suffix" class="el-input_icon" el-icon-date></i>
</el-input>
使用type="textarea",可以将输入框设置成文本域;
<el-input type="textarea" v-model="textarea"></el-input>
PS: 使用属性autosize可以自动扩展其高度
复合型输入框
使用<template>可以实现复合型输入库;
<el-input>
<template slot="append"></template>
</el-input>
PS: 和之前的表单一样可以使用size来设置尺寸;
可以通过输入库激活或输入的方式匹配数据列表内的相关信息;
<el-autocomplete :fetch-suggestions="querySearch" v-model="state">
</el-autocomplete>
PS: 这里相关的方法:querySearch和自动载入的loadAll()直接复制即可,固定格式;
PS: 关于事件,输入框有:focus/blur/select; 自动完成有select/change;
InputNumber计数器框
1.基础InputNumber计数器,带双向绑定;
<el-input-number v-model="number"></el-input-model>
data() {
return {
number :' '
}
}
使用 :max / :min限制最大值和最小值,支持change事件;
<el-input-number v-model="number" :min="1" :max="5" @change="change" />
change(e) {
console.log(e)
}
PS: 设置disabled禁用,设置:step=1为增减步长,设置 :precision=2为小数点精度
<el-input-number v-model="number" :step="1" :precision="2" >
</el-input-number>
事件支持:change/blur/focus,方法支持:focus/select(区别:无回调)
select选择器
1.基础select选择器,具体如下:
<el-row>
<el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value" ></el-option>
</el-select>
</el-row>
data () {
return {
value: ' ',
option : [
{
value : 1,
label :'北京'
},
{
value : 2,
label :'上海'
},
{
value : 3,
label :'广州'
}
]
}
}
关于禁用,有两种:1.在el-select设置;2.在el-option设置;
<el-select v-model="value" placeholder="请选择" disabled>
或
<el-option :disabled="item.value === 1"></el-option>
使用clearable属性,清空选择的项目;使用multiple,实现多选项目;
<el-select v-model="value" placeholder="请选择" clearable multiple>
使用filterable属性,执行选择项搜索;
<el-select v-model="value" placeholder="请选择" fillterable>
Cascader选择器
1.默认是通过click点击来实现菜单的展开,我们也可以设置为hover悬浮
<el-cascader v-model="value" :options="options" :props="{ expandTrigger : 'hover' }">
2.使用disabled和clearable,禁用和清空,和Select选择器一样
<el-cascader v-model="value" :options="options" clearable disabled>
3.使用: show-all-levels来限制获取到的是最后一级的内容,设置false即可
<el-cascader v-model="value" :options="options" :show-all-levels="false" :props="props">
data() {
return {
props :{
multiple : true
},
}
}
Switch开关
基础的switch开关,具体如下:
<el-switch v-model="value" active-color="#13ce66" inactive-color="#ccc" active-text="打开" inactive-text="关闭">
</el-switch>
data () {
return {
value : true
}
},
除了Boolean类型,也可以是String或Number类型;
< el-switch v-model="value"
active-color="#13ce66"
inactive-color="#cccccc"
active-value="100"
inactive-value="0"
@change="switchChange" >
</el-switch>
data () {
return {
value : '0'
}
},
Slider滑块
基础Slider滑块,具体如下:
<el-slider v-model="value"></el-slider>
data () {
return {
value : 0
}
}
使用 : show-tooltip实现隐藏文本提示,: format-tooltip实现自定义格式化;
<el-slider v-model="value2" :show-tooltip="false">
</el-slider>
<el-slider v-model="value2" :format-tooltip="formatTooltip">
</el-slider>
methods : {
formatTooltip(value) {
return value / 100
}
}
使用show-input可自带输入框;
<el-slider v-model="value" show-input>
</el-slider>
使用range实现范围选择;
<el-slider v-model="value6" range :min="1" :max="10">
</el-slider>
value6 : [4,6]
使用:step实现离散效果,再使用show-stops实现断点效果;
<el-slider v-model="value4" :step="10">
</el-slider>
<el-slider v-model="value5" :step="10" show-stops>
</el-slider>
TimePicker时间选择器
选择一个固定的时间点,具体如下:
<el-time-select v-model="value" :picker-options="{
start : '08:30',
step : '00:15',
end : '18:30'
}" placeholder="选择时间" />
data () {
return {
value : ' '
}
}
选择一个任意时间点,具体如下:
< el-time-picker v-model="value2" arrow-control :picker-options="{
selectableRange : '18:30:00 - 20:30:00'
}">
</el-time-picker>
PS: arrow-control属性可开启箭头选择,而selectableRange是限制时间范围;
丰富的任意时间范围,具体如下:
< el-time-picker v-model="value3"
is-range
range-separator="至"
start-placeholder='开始时间'
end-placeholder='结束时间'
</el-time-picker>
PS: is-range开启丰富的任意时间范围,其它字面意思
PS:属性方法和之前组件类似
DatePicker日期选择器
选择一个基础的
<el-date-picker v-model="value">
</el-date-picker>
data () {
return {
value : ' '
}
}
可以设置一个type属性,设置获取的值
<el-date-picker v-model="value"
type="date"
placeholder="选择日期"/>
PS: type设置为datetime,可以获取到日期+时间
自定义快捷选项的日期选择,具体如下;
<el-date-picker v-model="value"
type="datetime"
placeholder="选择日期"
:picker-options="getPicker"/>
data () {
return {
value : ' ',
getPicker : {
//shortcuts是固定名称,表示设置快捷键
shortcuts : [{
text : '今天',
onClick (obj) {
obj.$emit('pick',new Date() )
}
},{
text : '昨天',
onClick (obj) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24)
obj.$emit('pick',date )
}
},{
text : '明天',
onClick (obj) {
const date = new Date();
date.setTime(date.getTime() + 3600 * 1000 * 24)
obj.$emit('pick',new Date() )
}
}
]
}
}
}
选定一个日期范围,具体如下:
<el-date-picker v-model="value2"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份">
</el-date-picker>
选定一个日期,并进行格式化,具体如下:
<el-date-picker v-model="value"
type="datetime"
placeholder="选择日期"
format="yyyy年MM月dd日"
:picker-options="getPicker" />
</el-date-picker>