1、下载npm i element-ui -S
2、引入css样式
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
3、布局
父级盒子可以嵌套配置
el-row相当与div,可加属性:
:gutter="20" 栅格间隔;即padding值
type="flex" 添加弹性盒子布局
justify=“start” flex布局的排列方式 start/end/center/space-around/space-between
align=“top” flex 布局下的垂直排列方式 top/middle/bottom 上/中/下
tag=“ul” 自定义标签
el-col是在el-row的下的div,属性可加:
:span = "24" 24等分
:offset=“1” 栅格左侧的间隔格数1份 margin-left
:push=“1” 栅格向右移动格数1份 定位left
:pull="1" 栅格向左移动格数1份 定位right
tag 自定义标签
响应式布局:
:xs=“1” <768px 1份
:sm=“2” ≥768px 2份
:md=“3” ≥992px 3份
:lg=“4” ≥1200px 4份
:xl=“5” ≥1920px 5份
<el-container>:外层容器。当子元素中包含
<el-header> 或
<el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。
属性:direction 子元素中有
el-header 或
el-footer 时为 vertical,否则为 horizontal
<el-header>:顶栏容器。
属性:height 高度
<el-aside>:侧边栏容器。
属性:width 宽度
<el-main>:主要区域容器。
<el-footer>:底栏容器。
属性:height 高度
4、图标icon
http://element.eleme.io/#/zh-CN/component/icon
5、按钮
el-button属性:
size="medium" medium / small / mini 中等、小型、超小
type="primary" primary / success / warning / danger / info / text 更改背景颜色
plain true、false 是否为朴素按钮(貌似没啥用)
round true、false 是否为圆角
loading true、false 是否为加载中状态(点不了的按钮有啥用)
disabled true、false 是否禁用
icon=“” 图标类名 在按钮上添加图标
autofocus true、false 是否默认聚焦
native-type button / submit / reset 原生 type 属性
6、Radio 单选框
可以用v-model绑定属性,进行判断选中状态
radio的事件:
change 绑定值变化时触发的事件 例子:@change="执行函数"
el-radio属性:
label Radio的value 也就是v-model绑定的标识
disabled true、false 是否禁用
border true、false 是否显示边框
size=“” medium / small / mini 尺寸,仅在 border 为真时有效
name 原生 name 属性
el-radio-group属性: 注:包裹radio组的容器
size=“” medium / small / mini 改变所有子级带border属性的大小
disabled true、false 是否禁用 此群组所有的radio都被禁用
text-color="" 颜色 激活时按钮文本颜色(注意是按钮)
fill="" 颜色 激活改变按钮的边框与背景色(注意是按钮)
el-radio-group事件
@change=“执行函数”
el-radio-button 按钮radio
label Radio的value 也就是v-model绑定的标识
disabled 是否禁用
name 原声name属性
7、checkbox多选框
v-model可以绑定数组,控制那些checkbox为勾选状态
checkbox,Checkbox-button属性:
size=“” medium / small / mini 多选框组尺寸,仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效
disabled true、false 是否禁用
true-label 选中的值 (啥意思?)
false-label 没有选中时的值 (啥意思?)
border true、false 显示边框
name 原生 name 属性
checked true、false 当前是否勾选 加上:为false也会变,只是初始默认值
indeterminate true、false 设置 indeterminate 状态,只负责样式控制
Checkbox 事件
@change="执行函数"
Checkbox-group属性:
:max 可以控制被勾选的项目的数量。(最大)
size=“” medium / small / mini 多选框组尺寸,仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效
disabled true、false 是否禁用
text-color 颜色 按钮形式的 Checkbox 激活时的文本颜色
fill 颜色 按钮形式的 Checkbox 激活时的填充色和边框色
Checkbox-group事件:
@change=“执行函数”
8、input输入框
input属性:
type text / textarea input的类型 单行文本与多行文本
value=“” 输入框中的值 绑定值
:maxlength 原生属性,最大输入长度
:minlength 原生属性,最小输入长度
placeholder 输入框占位文本
clearable true、false 是否可清空
disabled true、false 是否禁用
size=“” medium / small / mini 输入框尺寸,只在
type!="textarea" 时有效
prefix-icon=“图标的类名” 输入框头部图标
suffix-icon=“图标的类名” 输入框尾部图标
rows 输入框行数,只对
type="textarea" 有效 默认2
autosize 自适应内容高度,只对
type="textarea"有效,可传入对象,如,{ minRows: 2, maxRows: 6 }
auto-complete 原生属性,自动补全
name 原生属性
readonly true、false 原生属性,是否只读 不能输入值
:max 原生属性,设置最大值
:min 原生属性,设置最小值
step 原生属性,设置输入字段的合法数字间隔
resize none, both, horizontal, vertical 控制是否能被用户缩放
autofocus true, false 原生属性,自动获取焦点
form 原生属性
label 输入框关联的label文字
tabindex 输入框的tabindex(不造啥意思)
Input slots属性:
prefix 输入框头部内容,只对
type="text" 有效
suffix 输入框尾部内容,只对
type="text" 有效
prepend 输入框前置内容,只对
type="text" 有效
append 输入框后置内容,只对
type="text" 有效
例子:
<el-input>
<i slot="prefix">111</i>
</el-input>
Input事件:
blur 在 Input 失去焦点时触发
focus 在 Input 获得焦点时触发
change 在 Input 值改变时触发
clear 在点击"clearable"属性生成的清空按钮时触发
Input方法
focus 使 input 获取焦点(莫名奇妙???)
el-autocomplete属性:(可带输入建议的输入框组件,
fetch-suggestions 是一个返回输入建议的方法属性,如 querySearch(queryString, cb),在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中)
disabled boolean 禁用
placeholder 输入框占位文本
value-key 输入建议对象中用于显示的键名
value 必填值,输入绑定值
debounce 获取输入建议的去抖延时
fetch-suggestions 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它 Function(queryString, callback) (暂时未看)
popper-class Autocomplete 下拉列表的类名
trigger-on-focus 是否在输入框 focus 时显示建议列表
name 原生属性
select-when-unmatched 在输入没有任何匹配建议的情况下,按下回车是否触发
select 事件
label 输入框关联的label文字
prefix-icon 输入框头部图标
suffix-icon 输入框尾部图标
Autocomplete slots属性:
name 说明
prefix 输入框头部内容
suffix 输入框尾部内容
prepend 输入框前置内容
append 输入框后置内容
Autocomplete Events:
select 点击选中建议项时触发
9、inputNumber计数器
el-input-number属性:
value 绑定值
:min 设置计数器允许的最小值
:max 设置计数器允许的最大值
step 计数器步长
size large, small 计数器尺寸
disabled boolean 是否禁用计数器
controls boolean 是否使用控制按钮
controls-position right 控制按钮位置
name 原生属性
label 输入框关联的label文字
事件:
change 绑定值被改变时触发
blur 在组件 Input 失去焦点时触发
focus 在组件 Input 获得焦点时触发
Methods方法:
focus 使 input 获取焦点
10、Select 选择器
el-select属性:
multiple boolean 是否多选
disabled boolean 是否禁用
value-key 作为 value 唯一标识的键名,绑定值为对象类型时必填
size medium/small/mini 输入框尺寸
clearable boolean 单选时是否可以清空选项
collapse-tags boolean 多选时是否将选中值按文字的形式展示
multiple-limit number 多选时用户最多可以选择的项目数,为 0 则不限制
name select input 的 name 属性
auto-complete select input 的 autocomplete 属性
placeholder 占位符
filterable boolean 是否可搜索
allow-create boolean 是否允许用户创建新条目,需配合
filterable 使用
filter-method function 自定义搜索方法
remote boolean 是否为远程搜索
remote-method function 远程搜索方法
loading boolean 是否正在从远程获取数据
loading-text 加载中 远程加载时显示的文字
no-match-text 无匹配数据 搜索条件无匹配时显示的文字
no-data-text 无数据 选项为空时显示的文字
popper-class Select 下拉框的类名
reserve-keyword boolean 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词
default-first-option boolean 在输入框按下回车,选择第一个匹配项。需配合
filterable 或
remote 使用
popper-append-to-body boolean 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false
Select Events(事件):
change 选中值发生变化时触发
visible-change 出现则为 true,隐藏则为 false 下拉框出现/隐藏时触发
remove-tag 多选模式下移除tag时触发
clear 可清空的单选模式下用户点击清空按钮时触发
blur 当 input 失去焦点时触发
focus 当 input 获得焦点时触发
el-option选择条数,属性:
value 选项的值
label 选项的标签,若不设置则默认与
value 相同
disabled boolean 是否禁用该选项
Option Group属性:
label 分组的组名
disabled 是否将该分组下所有选项置为禁用
Methods:
focus 使 input 获取焦点
11、Cascader 级联选择器
el-cascader属性:
optios array 可选项数据源,键名可通过
props 属性配置
props object 配置选项,具体见下表
value array 选中项绑定值
separator 默认/ 选项分隔符
popper-class 自定义浮层类名
placeholder 输入框占位文本
disabled boolean 是否禁用
clearable boolean 是否支持清空选项
expand-trigger click / hover 次级菜单的展开方式
show-all-levels boolean 输入框中是否显示选中值的完整路径
filterable boolean 是否可搜索选项
debounce number默认300 搜索关键词输入的去抖延迟,毫秒
change-on-select boolean 是否允许选择任意一级的选项
size medium / small / mini 尺寸
before-filter function(value) 筛选之前的钩子,参数为输入的值,若返回 false 或者返回 Promise 且被 reject,则停止筛选
props属性:
value 指定选项的值为选项对象的某个属性值
label 指定选项标签为选项对象的某个属性值
children 指定选项的子选项为选项对象的某个属性值
disabled 指定选项的禁用为选项对象的某个属性值
Events事件:
change 当绑定值变化时触发的事件
active-item-change 当父级选项变化时触发的事件,仅在
change-on-select 为
false 时可用
blur 在 Cascader 失去焦点时触发
focus 在 Cascader 获得焦点时触发
12、switch开关
el-switch属性:
disabled boolean 是否禁用
width number默认40 switch 的宽度(像素)
active-icon-class switch 打开时所显示图标的类名,设置此项会忽略
active-text
inactive-icon-class switch 关闭时所显示图标的类名,设置此项会忽略
inactive-text
active-text switch 打开时的文字描述
inactive-text switch 关闭时的文字描述
active-value boolean / string / number switch 打开时的值
inactive-value boolean / string / number switch 关闭时的值
active-color switch 打开时的背景色
inactive-color switch 关闭时的背景色
name switch 对应的 name 属性
Events事件:
change switch 状态发生变化时的回调函数
Methods方法:
focus 使 Switch 获取焦点
13、slider滑块
可以用v-model绑定一个数组,显示范围,例:【4,8】
el-slider属性:
min 最小值
max 最大值
disabled boolean 是否禁用
step number默认1 步长
show-input boolean 是否显示输入框,仅在非范围选择时有效
show-input-controls boolean 在显示输入框的情况下,是否显示输入框的控制按钮
input-size large / medium / small / mini 输入框的尺寸
show-stops boolean 是否显示间断点
show-tooltip boolean 是否显示 tooltip
format-tooltip function(value) 格式化 tooltip message
range boolean 是否为范围选择
vertical boolean 是否竖向模式
height Slider 高度,竖向模式时必填
label 屏幕阅读器标签
debounce number默认300 输入时的去抖延迟,毫秒,仅在
show-input等于true时有效
tooltip-class tooltip 的自定义类名
Events事件:
change 值改变时触发(使用鼠标拖曳时,只在松开鼠标后触发)
14、TimePicker 时间选择器
el-time-select属性:
readonly boolean 完全只读
disabled boolean 禁用
editable boolean 文本框可输入
clearable boolean 是否显示清除按钮
size medium / small / mini 输入框尺寸
placeholder 非范围选择时的占位内容
start-placeholder 范围选择时开始日期的占位内容
end-placeholder 范围选择时开始日期的占位内容
is-range boolean 是否为时间范围选择,仅对
<el-time-picker>有效
arrow-control boolean 是否使用箭头进行时间选择,仅对
<el-time-picker>有效
value date(TimePicker) / string(TimeSelect) 绑定值
align left / center / right 对齐方式
popper-class TimePicker 下拉框的类名
picker-options object 当前时间日期选择器特有的选项参考下表
range-separator 选择范围时的分隔符
value-format 可选,仅TimePicker时可用,绑定值的格式。不指定则绑定值为 Date 对象
default-value 可被
new Date()解析(TimePicker) / 可选值(TimeSelect) 可选,选择器打开时默认显示的时间
name 原生属性
prefix-icon 自定义头部图标的类名
clear-icon 自定义清空图标的类名
Time Select Options属性:
start 开始时间
end 结束时间
step 间隔时间
minTime 最小时间,小于该时间的时间段将被禁用
maxTime 最大时间,大于该时间的时间段将被禁用
Time Picker Options属性:
selectableRange 可选时间段,例如
'18:30:00 - 20:30:00'或者传入数组
['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']
format 小时:
HH,分:
mm,秒:
ss,AM/PM
A 时间格式化(TimePicker)
Events事件:
change 用户确认选定的值时触发
blur 当 input 失去焦点时触发
focus 当 input 获得焦点时触发
Methods方法:
focus 使 input 获取焦点