Container容器：用于布局的容器组件，方便快速的搭建页面的基本结构
以上组件采用了flex布局，使用前请确认目标浏览器是否兼容，此外，
Basic组件规范：
颜色：主色，辅助色，中性色
字体：字体，字号，行高
边框：实线，虚线，圆角，投影
Button按钮
Button按钮和Link文字一样，有固定的样式
使用plain属性，可以实现镂空效果，使用disabled属性，可以禁用：
PS：round实现椭圆，circle实现圆；
使用type="text"可以将button转换成纯文本按钮：
使用
使用 ：loading="true"实现加载中的效果
使用size="small"等属性，实现三种大小：
Radio和Checkbox
1.单选框radio
data(){
return {
sex : '1'
}
}
PS: 这里v-model和sex进行双向绑定，label相当于value,且和sex值一致则首选；
2. 使用群组单选框，可以将双向绑定置顶操作，具体如下：
data(){
return {
city : 1
}
}
PS: 如果想禁用设置：disabled; 如想带有边框设置：border;
3.可以使用el-radio-button实现按钮式单选框，size可以设置大小
PS: 可以在群组el-radio-button设置size属性，值为：medium/ samll /mini；
4.单选框或群组单选都具有change事件，改变后即可出发；
Checkbox复选框
return {
checkList ：['音乐','体育']
}
PS：单一复选框，比如协议确定，就直接使用el-checkbox不需要群组；
6.使用 :max/ :min，可选择最大/最小的勾选数量；
7.和单选框一样，支持使用el-checkbox-button样式；
8.事件和radio一样，支持change, 具体如下：
PS: 其余和单选框类似，注意button样式和普通样式的属性区别；
Input输入框
基础输入框Input,带双向绑定；
data() {
return {
input : ' '
}
}
使用clearable属性，提供框内清空按钮，使用show-password实现密码框；
使用maxlength属性，设置输入限制；
使用prefix-icon设置前缀内置图标；使用suffix-icon设置后缀内置图标；
前置图标：
后置图标：
PS: 支持slot方式，具体如下：
使用type="textarea"，可以将输入框设置成文本域；
PS: 使用属性autosize可以自动扩展其高度
复合型输入框
使用可以实现复合型输入库；
PS: 和之前的表单一样可以使用size来设置尺寸；
可以通过输入库激活或输入的方式匹配数据列表内的相关信息；
PS: 这里相关的方法：querySearch和自动载入的loadAll()直接复制即可，固定格式；
PS： 关于事件，输入框有：focus/blur/select; 自动完成有select/change;
InputNumber计数器框
1.基础InputNumber计数器，带双向绑定；
data() {
return {
number ：' '
}
}
使用 :max / :min限制最大值和最小值，支持change事件；
change(e) {
console.log(e)
}
PS: 设置disabled禁用，设置:step=1为增减步长，设置 :precision=2为小数点精度
事件支持：change/blur/focus，方法支持：focus/select(区别：无回调)
select选择器
1.基础select选择器，具体如下：
:key="item.value" :label="item.label" :value="item.value" > data () { return { value: ' ', option : [ { value : 1, label ：'北京' }, { value : 2, label ：'上海' }, { value : 3, label ：'广州' } ] } } 关于禁用，有两种：1.在el-select设置；2.在el-option设置； 或 使用clearable属性，清空选择的项目；使用multiple,实现多选项目； 使用filterable属性，执行选择项搜索； 1.默认是通过click点击来实现菜单的展开，我们也可以设置为hover悬浮 2.使用disabled和clearable，禁用和清空，和Select选择器一样 3.使用: show-all-levels来限制获取到的是最后一级的内容，设置false即可 data() { return { props ：{ multiple : true }, } } 基础的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" > data () { return { value : '0' } }， 基础Slider滑块，具体如下： data () { return { value : 0 } } 使用 : show-tooltip实现隐藏文本提示，: format-tooltip实现自定义格式化； methods : { formatTooltip(value) { return value / 100 } } 使用show-input可自带输入框； 使用range实现范围选择； value6 : [4,6] 使用：step实现离散效果，再使用show-stops实现断点效果； 选择一个固定的时间点，具体如下： data () { return { value : ' ' } } 选择一个任意时间点，具体如下： < el-time-picker v-model="value2" arrow-control :picker-options="{ selectableRange : '18:30:00 - 20:30:00' }"> PS: arrow-control属性可开启箭头选择，而selectableRange是限制时间范围； 丰富的任意时间范围，具体如下： < el-time-picker v-model="value3" is-range range-separator="至" start-placeholder='开始时间' end-placeholder='结束时间' PS: is-range开启丰富的任意时间范围，其它字面意思 PS：属性方法和之前组件类似 选择一个基础的 data () { return { value : ' ' } } 可以设置一个type属性，设置获取的值 type="date" placeholder="选择日期"/> PS: type设置为datetime，可以获取到日期+时间 自定义快捷选项的日期选择，具体如下； 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() ) } } ] } } } 选定一个日期范围，具体如下： type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"> 选定一个日期，并进行格式化，具体如下： type="datetime" placeholder="选择日期" format="yyyy年MM月dd日" :picker-options="getPicker" />Cascader选择器
Switch开关
Slider滑块
TimePicker时间选择器
DatePicker日期选择器