组件文档

基于element-plus封装的常见的一些组件

组件列表

组件名	描述
date-picker	el-date-picker的封装版本
form-item	el-form-item的二次封装版
form-table-container	将el-table和el-form结合起来的组件，形成带有搜索/编辑的表格的组件
table-edit-column	编辑表格中的列
table-edit-column-action	编辑表格中的操作列
form-table-item	用于放置在form-table-container的默认插槽中，用于同时声明表格中的列和表单项单项，相当于el-col、form-item、el-table-column的结合体
form-table-search-item	用于搜索表单的搜索、重置功能
load-list	带有分页的加载列表的功能
select-data	el-select选择框的二次封装版本
sugar-button	el-button的二次封装版本

date-picker

el-date-picker的封装版本

属性（Props）

名称	类型	默认值	描述
available-start-date	Date	undefined	允许的开始日期，若只传入此参数，则会禁用该日期之前的所有日期
available-end-date	Date	undefined	允许的结束日期，若只传入传入此参数，则会禁用该日期之后的所有日期
model-value	number，string，Date，[Date, Date]，[string, string]	''	绑定值，若为数组，长度应为2
readonly	boolean	false	日期选择器是否为只读状态
disabled	boolean	false	日期选择器是否禁用
size	''，'large'，'default'，'small'	-	输入框尺寸
editable	boolean	true	输入框是否可编辑
clearable	boolean	true	是否显示清除按钮
placeholder	string	''	非范围选择模式下的占位文本
start-placeholder	string	-	范围选择模式下开始日期的占位文本
end-placeholder	string	-	范围选择模式下结束日期的占位文本
type	'year'，'month'，'Date'，'dates'，'datetime'，'week'，'datetimerange'，'daterange'，'monthrange'	date	选择器类型
format	string see	YYYY-MM-DD	输入框中显示值的格式
popper-class	string	-	日期选择器下拉框的自定义类名
popper-options	Partial<PopperOptions>	{}	自定义下拉框配置，更多信息参见 popper.js
range-separator	string	'-'	范围分隔符
default-value	Date，[Date, Date]	-	可选，日历的默认日期
default-time	Date，[Date, Date]	-	可选，选择日期范围时使用的时间值
value-format	string see	-	可选，绑定值的格式。若未指定，绑定值将为Date对象
id	string，[string, string]	-	与原生input的id属性相同
name	string，[string, string]	''	与原生input的name属性相同
unlink-panels	boolean	false	在范围选择器中解除两个日期面板的联动
prefix-icon	string，Component	''	自定义前缀图标组件。默认情况下，若type值为TimeLikeType，则为Clock，否则为Calendar
clear-icon	string，Component	CircleClose	自定义清除图标组件
validate-event	boolean	true	是否触发表单验证
disabled-date	(data: Date) => boolean	-	一个判断日期是否禁用的函数，参数为该日期，应返回布尔值
shortcuts	Array<{ text: string, value: Date，Function }>	[]	设置快捷选项的对象数组
cell-class-name	(data: Date) => string	-	设置自定义类名
teleported	boolean	true	日期选择器下拉框是否 teleport 到 body 元素上

事件（Events）

名称	描述
change	用户确认值时触发
blur	输入框失焦时触发
focus	输入框聚焦时触发
calendar-change	日历选中日期改变时触发
panel-change	导航按钮点击时触发
visible-change	日期选择器下拉框显示/隐藏时触发

插槽（Slots）

名称	描述
default	自定义单元格内容
range-separator	自定义范围分隔符内容

form-item

el-form-item的二次封装版

属性（Props）

名称	类型	默认值	描述
value-type	'string'，'number'，'array'，'object'，'boolean'，'date'	-	验证规则中的类型
pattern	RegExp	-	验证规则中的正则表达式
trigger	'change'，'blur'	-	验证规则中的触发方式
message	string	-	验证规则中的提示信息
prop	string，string[]	-	model 中的键名。可以是属性的路径（例如 a.b.0 或 ['a', 'b', '0']）。在使用 validate 和 resetFields 方法时，该属性是必需的。
label	string	-	标签文本。
label-width	string，number	''	标签宽度，例如 '50px'。支持 'auto'。
required	boolean	-	是否为必填项，若省略则由验证规则决定。
rules	Arrayable<FormItemRule>	-	表单验证规则，参见下表，更高级的用法请参考 async-validator。
error	string	-	字段错误信息，设置该值后，字段将立即验证错误并显示此信息。
show-message	boolean	true	是否显示错误信息。
inline-message	string，boolean	''	行内样式的验证信息。
size	''，'large'，'default'，'small'	-	控制该表单项内组件的尺寸。
for	string	-	与原生 label 中的 for 属性相同。
validate-status	''，'error'，'validating'，'success'	-	表单项的验证状态。

插槽（Slots）

名称	描述
default	表单项的内容。
label	自定义标签显示内容。
error	自定义验证信息显示内容。

form-table-container

将el-table和el-form结合起来的组件，形成带有搜索/编辑的表格的组件

属性（Props）

名称	类型	默认值	描述
gutter	number	0	el-row中的gutter
type	'default'，'edit'	default	组件类型, 分为编辑表格和默认表格

插槽（Slots）

名称	描述
default	默认插槽，只接受FormTableSearchItem，FormTableItem，el-form-item，el-table-column组件
table	el-table的放置位置，当然也可以放置除了el-table之外其他的内容
form	el-form的放置位置，当然也可以放置除了el-form之外其他的内容

table-edit-column

编辑表格中的列

属性（Props）

名称	类型	默认值	描述
hide-required-asterisk	boolean	-	是否隐藏必填的*号
value-type	'string'，'number'，'array'，'object'，'boolean'，'date'	-	验证规则中的type
pattern	RegExp	-	验证规则中的pattern
trigger	'change'，'blur'	-	验证规则中的trigger
message	string	-	验证规则中的message
label-width	string，number	''	标签宽度，例如 '50px'。支持 'auto'。
required	boolean	-	是否为必填项，若省略则由验证规则决定。
rules	Arrayable<FormItemRule>	-	表单验证规则，参见下表，更高级的用法请参考 async-validator。
error	string	-	字段错误信息，设置该值后，字段将立即验证错误并显示此信息。
show-message	boolean	true	是否显示错误信息。
inline-message	string，boolean	''	行内样式的验证信息。
size	''，'large'，'default'，'small'	-	控制该表单项内组件的尺寸。
for	string	-	与原生 label 中的 for 属性相同。
validate-status	''，'error'，'validating'，'success'	-	表单项的验证状态。
type	'default'，'selection'，'index'，'expand'	default	列的类型。若设置为 selection，则列会显示复选框；若设置为 index，则列会显示行的索引（从 1 开始）；若设置为 expand，则列会显示展开图标
index	number，(index: number) => number	-	自定义每行的索引，在 type=index 的列中生效
label	string	-	列的标题
column-key	string	-	列的键名。若需要使用 filter-change 事件，需要通过该属性标识是哪个列正在被筛选
prop	string	-	字段名。也可以使用其别名：property
width	string，number	''	列的宽度
min-width	string，number	''	列的最小宽度。设置 width 的列有固定宽度，而设置 min-width 的列宽度会按比例分配
fixed	'left'，'right'，boolean	false	列是否固定在左侧/右侧。若为 true，则固定在左侧
render-header	(data: { column: TableColumnCtx<T>, $index: number }) => void	-	该列表头的渲染函数
sortable	boolean，string	false	列是否可排序。若将该属性设置为 'custom' 并监听 Table 的 sort-change 事件，可实现远程排序
sort-method	<T = any>(a: T, b: T) => number	-	排序方法，在 sortable 为 true 时生效。应返回一个数字，类似 Array.sort
sort-by	(row: any, index: number) => string，string，string[]	-	指定按哪个属性排序，在 sortable 为 true 且 sort-method 为 undefined 时生效。若设置为数组，则当前一个属性相等时，会按后一个属性继续排序
sort-orders	[]	['ascending', 'descending', null]	排序数据时使用的排序策略顺序，在 sortable 为 true 时生效。接受一个数组，当用户点击表头时，列会按数组中元素的顺序进行排序
resizable	boolean	true	列宽度是否可调整，在 el-table 的 border 为 true 时生效
formatter	(row: any, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode，string	-	格式化单元格内容的函数
show-overflow-tooltip	boolean	undefined	是否隐藏超出内容，并在鼠标悬停单元格时显示提示框
align	'left'，'center'，'right'	left	对齐方式
header-align	'left'，'center'，'right'	left	表头的对齐方式。若省略，则会使用上述 align 属性的值
class-name	string	-	列中单元格的类名
label-class-name	string	-	该列标题的类名
selectable	(row: any, index: number) => boolean	-	判断某行是否可被选中的函数，在 type 为 'selection' 时生效
reserve-selection	boolean	false	数据刷新后是否保留选中状态，在 type 为 'selection' 时生效。注意：要使该功能生效，row-key 是必需的
filters	Array<{text: string, value: string}>	-	数据筛选选项的数组。该数组中的每个元素都需要包含 text 和 value 属性
filter-placement	'top'，'top-start'，'top-end'，'bottom'，'bottom-start'，'bottom-end'，'left'，'left-start'，'left-end'，'right'，'right-start'，'right-end'	-	筛选下拉框的 placement 属性
filter-class-name	string	-	筛选下拉框的类名
filter-multiple	boolean	true	数据筛选是否支持多选
filter-method	(value: any, row: any, column: TableColumnCtx<T>) => void	-	数据筛选方法。若开启 filter-multiple，则每行都会调用该方法多次，只要其中一次调用返回 true，该行就会显示
filtered-value	string[]	-	选中数据的筛选值，当表头通过 render-header 渲染时可能会用到
tooltip-formatter	(data: { row: any, column: TableColumnCtx<T>, cellValue: any }) => VNode，string	-	使用 show-overflow-tooltip 时，自定义提示框内容

插槽（Slots）

名称	描述
default	表格列的自定义内容
header	表头的自定义内容
filter-icon	筛选图标的自定义内容
expand	展开列的自定义内容

table-edit-column-action

编辑表格中的操作列

属性（Props）

名称	类型	默认值	描述
edit-callback	function	-	编辑操作的回调函数，接收「打开加载」和「关闭加载」两个函数作为参数
delete-callback	function	-	删除操作的回调函数，接收「打开加载」和「关闭加载」两个函数作为参数
cancel-callback	function	-	取消操作的回调函数，接收「打开加载」和「关闭加载」两个函数作为参数
is-hidden-edit-btn	boolean	-	是否隐藏「编辑」按钮
is-hidden-delete-btn	boolean	-	是否隐藏「删除」按钮
has-icon	boolean	-	是否显示编辑和删除按钮的图标
is-hidden-cancel-btn	boolean	-	是否隐藏「取消」按钮
confirm-text	string	-	「确认」按钮的文本内容
cancel-text	string	-	「取消」按钮的文本内容
edit-text	string	-	「编辑」按钮的文本内容
delete-text	string	-	「删除」按钮的文本内容
btn-is-text	boolean	-	按钮是否为「纯文本样式」（非按钮组件，仅文字）
label	string	-	列的标题
column-key	string	-	列的键名。若需要使用 filter-change 事件，需要通过该属性标识是哪个列正在被筛选
width	string，number	''	列的宽度
min-width	string，number	''	列的最小宽度。设置 width 的列有固定宽度，而设置 min-width 的列宽度会按比例分配
fixed	'left'，'right'，boolean	false	列是否固定在左侧/右侧。若为 true，则固定在左侧
render-header	(data: { column: TableColumnCtx<T>, $index: number }) => void	-	该列表头的渲染函数
sortable	boolean，string	false	列是否可排序。若将该属性设置为 'custom' 并监听 Table 的 sort-change 事件，可实现远程排序
sort-method	<T = any>(a: T, b: T) => number	-	排序方法，在 sortable 为 true 时生效。应返回一个数字，类似 Array.sort
sort-by	(row: any, index: number) => string，string，string[]	-	指定按哪个属性排序，在 sortable 为 true 且 sort-method 为 undefined 时生效。若设置为数组，则当前一个属性相等时，会按后一个属性继续排序
sort-orders	[]	['ascending', 'descending', null]	排序数据时使用的排序策略顺序，在 sortable 为 true 时生效。接受一个数组，当用户点击表头时，列会按数组中元素的顺序进行排序
resizable	boolean	true	列宽度是否可调整，在 el-table 的 border 为 true 时生效
formatter	(row: any, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode，string	-	格式化单元格内容的函数
show-overflow-tooltip	boolean	undefined	是否隐藏超出内容，并在鼠标悬停单元格时显示提示框
align	'left'，'center'，'right'	left	对齐方式
header-align	'left'，'center'，'right'	left	表头的对齐方式。若省略，则会使用上述 align 属性的值
class-name	string	-	列中单元格的类名
label-class-name	string	-	该列标题的类名
selectable	(row: any, index: number) => boolean	-	判断某行是否可被选中的函数，在 type 为 'selection' 时生效
reserve-selection	boolean	false	数据刷新后是否保留选中状态，在 type 为 'selection' 时生效。注意：要使该功能生效，row-key 是必需的
filters	Array<{text: string, value: string}>	-	数据筛选选项的数组。该数组中的每个元素都需要包含 text 和 value 属性
filter-placement	'top'，'top-start'，'top-end'，'bottom'，'bottom-start'，'bottom-end'，'left'，'left-start'，'left-end'，'right'，'right-start'，'right-end'	-	筛选下拉框的 placement 属性
filter-class-name	string	-	筛选下拉框的类名
filter-multiple	boolean	true	数据筛选是否支持多选
filter-method	(value: any, row: any, column: TableColumnCtx<T>) => void	-	数据筛选方法。若开启 filter-multiple，则每行都会调用该方法多次，只要其中一次调用返回 true，该行就会显示
filtered-value	string[]	-	选中数据的筛选值，当表头通过 render-header 渲染时可能会用到
tooltip-formatter	(data: { row: any, column: TableColumnCtx<T>, cellValue: any }) => VNode，string	-	使用 show-overflow-tooltip 时，自定义提示框内容

插槽（Slots）

名称	描述
header	表头的自定义内容
other-actions	其他操作

form-table-item

用于放置在form-table-container的默认插槽中，用于同时声明表格中的列和表单项单项，相当于el-col、form-item、el-table-column的结合体

属性（Props）

名称	类型	默认值	描述
span	number	24	栅格占据的列数
offset	number	0	栅格左侧的间隔列数
push	number	0	栅格向右移动的列数
pull	number	0	栅格向左移动的列数
xs	number，{span?: number, offset?: number, pull?: number, push?: number}	-	<768px 响应式列数或列属性对象
sm	number，{span?: number, offset?: number, pull?: number, push?: number}	-	≥768px 响应式列数或列属性对象
md	number，{span?: number, offset?: number, pull?: number, push?: number}	-	≥992px 响应式列数或列属性对象
lg	number，{span?: number, offset?: number, pull?: number, push?: number}	-	≥1200px 响应式列数或列属性对象
xl	number，{span?: number, offset?: number, pull?: number, push?: number}	-	≥1920px 响应式列数或列属性对象
tag	string	div	自定义元素标签
hidden-table-column	boolean	-	是否隐藏表格的列
value-type	'string'，'number'，'array'，'object'，'boolean'，'date'	-	验证规则中的type
pattern	RegExp	-	验证规则中的pattern
trigger	'change'，'blur'	-	验证规则中的trigger
message	string	-	验证规则中的message
label-width	string，number	''	标签宽度，例如 '50px'。支持 'auto'。
required	boolean	-	是否为必填项，若省略则由验证规则决定。
rules	Arrayable<FormItemRule>	-	表单验证规则，参见下表，更高级的用法请参考 async-validator。
error	string	-	字段错误信息，设置该值后，字段将立即验证错误并显示此信息。
show-message	boolean	true	是否显示错误信息。
inline-message	string，boolean	''	行内样式的验证信息。
size	''，'large'，'default'，'small'	-	控制该表单项内组件的尺寸。
for	string	-	与原生 label 中的 for 属性相同。
validate-status	''，'error'，'validating'，'success'	-	表单项的验证状态。
type	'default'，'selection'，'index'，'expand'	default	列的类型。若设置为 selection，则列会显示复选框；若设置为 index，则列会显示行的索引（从 1 开始）；若设置为 expand，则列会显示展开图标
index	number，(index: number) => number	-	自定义每行的索引，在 type=index 的列中生效
label	string	-	列的标题
column-key	string	-	列的键名。若需要使用 filter-change 事件，需要通过该属性标识是哪个列正在被筛选
prop	string	-	字段名。也可以使用其别名：property
width	string，number	''	列的宽度
min-width	string，number	''	列的最小宽度。设置 width 的列有固定宽度，而设置 min-width 的列宽度会按比例分配
fixed	'left'，'right'，boolean	false	列是否固定在左侧/右侧。若为 true，则固定在左侧
render-header	(data: { column: TableColumnCtx<T>, $index: number }) => void	-	该列表头的渲染函数
sortable	boolean，string	false	列是否可排序。若将该属性设置为 'custom' 并监听 Table 的 sort-change 事件，可实现远程排序
sort-method	<T = any>(a: T, b: T) => number	-	排序方法，在 sortable 为 true 时生效。应返回一个数字，类似 Array.sort
sort-by	(row: any, index: number) => string，string，string[]	-	指定按哪个属性排序，在 sortable 为 true 且 sort-method 为 undefined 时生效。若设置为数组，则当前一个属性相等时，会按后一个属性继续排序
sort-orders	[]	['ascending', 'descending', null]	排序数据时使用的排序策略顺序，在 sortable 为 true 时生效。接受一个数组，当用户点击表头时，列会按数组中元素的顺序进行排序
resizable	boolean	true	列宽度是否可调整，在 el-table 的 border 为 true 时生效
formatter	(row: any, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode，string	-	格式化单元格内容的函数
show-overflow-tooltip	boolean	undefined	是否隐藏超出内容，并在鼠标悬停单元格时显示提示框
align	'left'，'center'，'right'	left	对齐方式
header-align	'left'，'center'，'right'	left	表头的对齐方式。若省略，则会使用上述 align 属性的值
class-name	string	-	列中单元格的类名
label-class-name	string	-	该列标题的类名
selectable	(row: any, index: number) => boolean	-	判断某行是否可被选中的函数，在 type 为 'selection' 时生效
reserve-selection	boolean	false	数据刷新后是否保留选中状态，在 type 为 'selection' 时生效。注意：要使该功能生效，row-key 是必需的
filters	Array<{text: string, value: string}>	-	数据筛选选项的数组。该数组中的每个元素都需要包含 text 和 value 属性
filter-placement	'top'，'top-start'，'top-end'，'bottom'，'bottom-start'，'bottom-end'，'left'，'left-start'，'left-end'，'right'，'right-start'，'right-end'	-	筛选下拉框的 placement 属性
filter-class-name	string	-	筛选下拉框的类名
filter-multiple	boolean	true	数据筛选是否支持多选
filter-method	(value: any, row: any, column: TableColumnCtx<T>) => void	-	数据筛选方法。若开启 filter-multiple，则每行都会调用该方法多次，只要其中一次调用返回 true，该行就会显示
filtered-value	string[]	-	选中数据的筛选值，当表头通过 render-header 渲染时可能会用到
tooltip-formatter	(data: { row: any, column: TableColumnCtx<T>, cellValue: any }) => VNode，string	-	使用 show-overflow-tooltip 时，自定义提示框内容

插槽（Slots）

名称	描述
default	el-form-item中的default插槽
formItemLabel	el-form-item中的label插槽
formItemError	el-form-item中的error插槽
table	el-table-column中的插槽

form-table-search-item

用于搜索表单的搜索、重置功能

属性（Props）

名称	类型	默认值	描述
search-text	string	搜索	搜索按钮的文本内容
reset-text	string	重置	重置按钮的文本内容

事件（Events）

名称	描述
search	点击搜索按钮时触发的事件
reset	点击重置按钮时触发的事件

load-list

带有分页的加载列表的功能

属性（Props）

名称	类型	默认值	描述
load	function	-	数据加载函数，接收页码、页大小、总条数，返回包含数据的 Promise
error-text	string	-	错误状态时显示的文本
pagination-background	boolean	true	el-pagination的background属性
pagination-size	'large'，'small'，'default'	default	el-pagination的size属性
pagination-layout	string	total, sizes, prev, pager, next, jumper	el-pagination的layout属性
empty-text	string	-	数据为空时显示的文本
is-auto-load	boolean	-	是否自动加载数据
pagination-align	'start'，'center'，'end'	-	分页器对齐方式，可选 'start'、'center'、'end'
hide-on-single-page	boolean	-	只有一页时是否隐藏分页器
disable-scroll-top	boolean	-	是否禁用滚动到顶部的行为
hide-default-empty-or-error-handle	boolean	-	隐藏默认的空数据或错误时的处理逻辑
scroll-container	any	-	滚动容器的引用
page-config	object	-	分页配置，包含 list 和 total 字段的键名映射

事件（Events）

名称	描述
loaded	数据加载完成后触发的事件

暴露的方法/属性（exposed）

名称	描述	类型
refresh	刷新列表方法	(isForce: boolean isScrollTop: boolean )
scrollToTop	滚动到顶部	-
refreshOfDelete	删除时调用的刷新列表的方法	(delCount: number )

select-data

el-select选择框的二次封装版本

属性（Props）

名称	类型	默认值	描述
model-value	string，number，boolean，object，array	-	绑定值
selected	object	-	可结合v-model:selected使用，当前选中的modelValue所对应的对象
labelKey	string	-	label的键名
valueKey	object	-	value的键名
multiple	boolean	false	是否启用多选
options	Array<{[key: string]: any}>，Function	-	选项数据，value、label和disabled的键名可通过props自定义
[props]	object	-	配置选项
disabled	boolean	false	是否禁用选择框
value-key	string	value	值的唯一标识键名，当值为对象时必填
size	''，'large'，'default'，'small'	-	输入框尺寸
clearable	boolean	false	是否可清空选择
collapse-tags	boolean	false	多选时是否将选中项折叠为文字显示
collapse-tags-tooltip	boolean	false	当启用collapse-tags时，鼠标悬停折叠文字时是否显示所有选中的标签。使用此属性需先开启collapse-tags
multiple-limit	number	0	多选时用户最多可选择的选项数。设为0则无限制
id	string	-	原生input的id属性
name	string	-	选择框输入框的name属性
effect	'dark'，'light'，string	light	提示框主题，内置主题：dark / light
autocomplete	string	off	选择框输入框的autocomplete属性
placeholder	string	-	占位文本，默认为'Select'
filterable	boolean	false	是否可搜索
allow-create	boolean	false	是否允许创建新选项。使用此属性需先开启filterable
filter-method	(query: string) => void	-	自定义搜索方法，第一个参数为当前输入值。使用此属性需先开启filterable
remote	boolean	false	是否从服务器加载选项
remote-method	(query: string) => void	-	输入值变化时触发的函数，参数为当前输入值。使用此属性需先开启filterable
remote-show-suffix	boolean	false	远程搜索模式下是否显示后缀图标
loading	boolean	false	是否正在从服务器加载数据
loading-text	string	-	从服务器加载数据时显示的文本，默认为'Loading'
no-match-text	string	-	搜索无匹配结果时显示的文本，也可使用empty插槽，默认为'No matching data'
no-data-text	string	-	无选项时显示的文本，也可使用empty插槽，默认为'No data'
popper-class	string	''	选择框下拉菜单的自定义类名
popper-style	string，object	-	选择框下拉菜单的自定义样式
reserve-keyword	boolean	true	当开启multiple和filterable时，选择选项后是否保留当前关键词
default-first-option	boolean	false	按回车时选择第一个匹配的选项。需配合filterable或remote使用
teleported	boolean	true	选择框下拉菜单是否使用 teleport，若为true，则会被传送到append-to指定的位置
append-to	CSSSelector，HTMLElement	-	选择框下拉菜单挂载到哪个元素上
persistent	boolean	true	当选择框下拉菜单未激活且persistent为false时，下拉菜单会被销毁
automatic-dropdown	boolean	false	对于不可搜索的选择框，此属性决定输入框获得焦点时是否弹出选项菜单
clear-icon	string，Component	CircleClose	自定义清空图标组件
fit-input-width	boolean	false	下拉菜单的宽度是否与输入框相同
suffix-icon	string，Component	ArrowDown	自定义后缀图标组件
tag-type	''，'success'，'info'，'warning'，'danger'	info	标签类型
tag-effect	''，'light'，'dark'，'plain'	light	标签效果
validate-event	boolean	true	是否触发表单验证
offset	number	12	下拉菜单的偏移量
show-arrow	boolean	true	下拉菜单是否显示箭头
placement	'top'，'top-start'，'top-end'，'bottom'，'bottom-start'，'bottom-end'，'left'，'left-start'，'left-end'，'right'，'right-start'，'right-end'	bottom-start	下拉菜单的位置
fallback-placements	Placement[]	['bottom-start', 'top-start', 'right', 'left']	下拉菜单的备选位置列表 popper.js
max-collapse-tags	number	1	最多显示的标签数量。使用此属性需先开启collapse-tags
popper-options	objectrefer to doc	{}	popper.js 参数
aria-label	string	-	与原生input的aria-label相同
empty-values	array	-	组件的空值，参见config-provider
value-on-clear	string，number，boolean，Function	-	清空时的返回值，参见config-provider
suffix-transition	boolean	true	下拉菜单显示/隐藏时图标的动画
tabindex	string，number	-	输入框的tabindex属性

事件（Events）

名称	描述
change	选中值变化时触发
visible-change	下拉菜单显示/隐藏时触发
remove-tag	多选模式下移除标签时触发
clear	可清空的选择框点击清空图标时触发
blur	输入框失去焦点时触发
focus	输入框获得焦点时触发
popup-scroll	下拉菜单滚动时触发
update:selected	用于v-model:selected的事件

插槽（Slots）

名称	描述
default	选项组件列表
header	下拉菜单顶部的内容
footer	下拉菜单底部的内容
prefix	选择框前缀内容
empty	无选项时的内容
tag	选择框标签内容，引入了子标签data、selectDisabled和deleteTag
loading	选择框加载状态的内容
label	选择框标签内容。引入了index

sugar-button

el-button的二次封装版本

属性（Props）

名称	类型	默认值	描述
auto-loading	boolean	-	触发点击事件之后，回调函数中会包含openLoading和closeLoading两个函数
auto-message-box	boolean	-	触发点击事件之后，会自动弹出消息框
message-box-options	SugarButtonPropsRequired['messageBoxOptions']	-	消息框配置项
size	'large'，'default'，'small'	-	按钮尺寸
type	'default'，'primary'，'success'，'warning'，'danger'，'info'，''，'text'	-	按钮类型，当设置color时，后者优先级更高
plain	boolean	false	是否为朴素按钮
text	boolean	false	是否为文字按钮
bg	boolean	false	文字按钮是否始终显示背景色
link	boolean	false	是否为链接按钮
round	boolean	false	是否为圆角按钮
circle	boolean	false	是否为圆形按钮
loading-icon	string，Component	Loading	自定义加载图标组件
disabled	boolean	false	是否禁用按钮
icon	string，Component	-	图标组件
autofocus	boolean	false	与原生按钮的autofocus属性相同
native-type	'button'，'submit'，'reset'	button	与原生按钮的type属性相同
auto-insert-space	boolean	false	自动在两个中文字符之间插入空格（仅当文本长度为2且所有字符均为中文时生效）
color	string	-	自定义按钮颜色，会自动计算hover和active状态的颜色
dark	boolean	false	深色模式，会自动将color转换为深色模式下的颜色
tag	string，Component	button	自定义元素标签

事件（Events）

名称	描述
click	按钮点击事件

插槽（Slots）

名称	描述
default	自定义默认内容
loading	自定义加载组件
icon	自定义图标组件