UNPKG

element-gui

Version:

A Component Library for Vue.js.

668 lines 170 kB
{ "el-affix": { "attributes": [ "offset-top", "offset-bottom", "target" ], "description": "### [ElAffix](https://ui.const.team/#/component/affix)\n\n将元素钉在固定位置,常用于顶部菜单或者侧边菜单。\n\n ----- \n\n#### ElAffix Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|offset-top|距离窗口顶部达到指定偏移量后触发|number|—|0|\n|offset-bottom|距离窗口底部达到指定偏移量后触发|number|—|—|\n|target|设置 `Affix` 需要监听其滚动事件的元素,值为一个返回对应 `DOM` 元素的函数|function|—|() => window|\n\n\n ----- \n\n#### ElAffix Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|change|在固定状态发生改变时触发|固定则为 `true`,否则为 `false`|\n" }, "el-alert": { "attributes": [ "title", "type", "description", "closable", "center", "close-text", "show-icon", "effect" ], "description": "### [ElAlert](https://ui.const.team/#/component/alert)\n\n用于页面中展示重要的提示信息。\n\n ----- \n\n#### ElAlert Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|title|标题|string|—|—|\n|type|主题|string|`primary` / `success` / `warning` / `info` / `error`|primary|\n|description|辅助性文字,也可通过默认 `slot` 传入|string|—|—|\n|closable|是否可关闭|boolean|—|true|\n|center|文字是否居中|boolean|—|false|\n|close-text|关闭按钮自定义文本|string|—|—|\n|show-icon|是否显示图标|boolean|—|false|\n|effect|选择提供的主题|string|`light` / `dark`|light|\n\n\n ----- \n\n#### ElAlert Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|close|关闭 `Alert` 时触发的事件|—|\n\n\n ----- \n\n#### ElAlert Slots\n\n|名称|说明|\n|:---|:---|\n|default|描述|\n|title|标题的内容|\n" }, "el-autocomplete": { "attributes": [ "placeholder", "clearable", "disabled", "readonly", "size", "value-key", "value", "v-model", "debounce", "placement", "fetch-suggestions", "popper-class", "trigger-on-focus", "name", "select-when-unmatched", "label", "prefix-icon", "suffix-icon", "hide-loading", "popper-append-to-body", "highlight-first-item", "select-on-tab", "visible-arrow" ], "description": "### [ElAutocomplete](https://ui.const.team/#/component/autocomplete)\n\n根据输入内容提供对应的输入建议。\n\n ----- \n\n#### ElAutocomplete Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|placeholder|输入框占位文本|string|—|—|\n|clearable|是否可清空|boolean|—|false|\n|disabled|禁用|boolean|—|false|\n|readonly|原生属性,是否只读|boolean|—|false|\n|size|输入框尺寸,继承全局尺寸或者表单尺寸|string|`medium` / `small` / `mini`|—|\n|value-key|输入建议对象中用于显示的键名|string|—|value|\n|value / v-model|必填值,输入绑定值|string|—|—|\n|debounce|获取输入建议的去抖延时|number|—|300|\n|placement|下拉框出现的位置|string|`top` / `top-start` / `top-end` / `bottom` / `bottom-start` / `bottom-end` / `left` / `left-start` / `left-end` / `right` / `right-start` / `right-end`|bottom-start|\n|fetch-suggestions|返回输入建议的方法,仅当你的输入建议数据 `resolve` 时,通过调用 `callback(data:[])` 来返回它|function(queryString, callback)|—|—|\n|popper-class|`Autocomplete` 下拉列表的类名|string|—|—|\n|trigger-on-focus|是否在输入框 `focus` 时显示建议列表|boolean|—|true|\n|name|原生属性|string|—|—|\n|select-when-unmatched|在输入没有任何匹配建议的情况下,按下回车是否触发 `select` 事件|boolean|—|false|\n|label|输入框关联的 `label` 文字|string|—|—|\n|prefix-icon|输入框头部图标|string|—|—|\n|suffix-icon|输入框尾部图标|string|—|—|\n|hide-loading|是否隐藏远程加载时的加载图标|boolean|—|false|\n|popper-append-to-body|是否将下拉列表插入至 `body` 元素,在下拉列表的定位出现问题时,可将该属性设置为 `false`|boolean|—|true|\n|highlight-first-item|是否默认突出显示远程搜索建议中的第一项|boolean|—|false|\n|select-on-tab|通过 `tab` 键选择|boolean|—|false|\n|visible-arrow|是否显示 `Tooltip` 箭头|boolean|—|false|\n\n\n ----- \n\n#### ElAutocomplete Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|blur|在 `Input` 失去焦点时触发|(event: Event)|\n|focus|在 `Input` 获得焦点时触发|(event: Event)|\n|select|点击选中建议项时触发|选中建议项|\n|change|在 `Input` 值改变时触发|(value: string / number)|\n|clear|在点击由 `clearable` 属性生成的清空按钮时触发|清空前的值|\n|visible-change|下拉框出现 / 隐藏时触发|出现则为 true,隐藏则为 false|\n\n\n ----- \n\n#### ElAutocomplete Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|focus|使 `Input` 获取焦点|—|\n|switchSuggestions|手动显示下拉框|—|\n\n\n ----- \n\n#### ElAutocomplete Slots\n\n|名称|说明|\n|:---|:---|\n|prefix|输入框头部内容|\n|suffix|输入框尾部内容|\n|prepend|输入框前置内容|\n|append|输入框后置内容|\n\n\n ----- \n\n#### ElAutocomplete Scoped Slot\n\n|名称|说明|\n|:---|:---|\n|default|自定义输入建议,参数为 `{ item }`|\n\n\n" }, "el-avatar": { "attributes": [ "icon", "size", "shape", "src", "src-set", "alt", "fit" ], "description": "### [ElAvatar](https://ui.const.team/#/component/avatar)\n\n用图标、图片或者字符的形式展示用户或事物信息。\n\n ----- \n\n#### ElAvatar Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|icon|设置头像的图标类型,参考 [Icon](https://ui.const.team/#/component/icon) 组件|string|—|—|\n|size|设置头像的大小|number / string|`number` / `medium` / `small` / `mini`|—|\n|shape|设置头像的形状|string|`circle` / `square`|circle|\n|src|图片头像的资源地址|string|—|—|\n|src-set|以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像|string|—|—|\n|alt|描述图像的替换文本|string|—|—|\n|fit|当展示类型为图片的时候,设置图片如何适应容器框|string|`fill` / `contain` / `cover` / `none` / `scale-down`|cover|\n\n\n ----- \n\n#### ElAvatar Events\n\n|事件名|说明|回调参数|\n|:---|:---|:---|\n|error|图片类头像加载失败的回调, 返回 `false` 会关闭组件默认的 `fallback` 行为|(e: Event)|\n\n\n ----- \n\n#### ElAvatar Slots\n\n|名称|说明|\n|:---|:---|\n|default|自定义头像展示内容|\n" }, "el-backtop": { "attributes": [ "target", "visibility-height", "right", "bottom", "effect", "square" ], "description": "### [ElBacktop](https://ui.const.team/#/component/backtop)\n\n返回页面顶部的操作按钮。\n\n ----- \n\n#### ElBacktop Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|target|触发滚动的对象|string|—|—|\n|visibility-height|滚动高度达到此参数值才出现|number|—|200|\n|right|控制其显示位置, 距离页面右边距|number|—|40|\n|bottom|控制其显示位置, 距离页面底部距离|number|—|40|\n|effect|默认提供的主题|string|`dark` / `light`|light|\n|square|是否为方形|boolean|—|false|\n\n\n ----- \n\n#### ElBacktop Events\n\n|事件名|说明|回调参数|\n|:---|:---|:---|\n|click|点击按钮触发的事件|点击事件|\n" }, "el-badge": { "attributes": [ "value", "max", "is-dot", "hidden", "type", "show-zero", "background-color", "offset", "badge-style", "badge-class" ], "description": "### [ElBadge](https://ui.const.team/#/component/badge)\n\n出现在按钮、图标旁的数字或状态标记。\n\n ----- \n\n#### ElBadge Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|value|显示值|string / number|—|—|\n|max|最大值,超过最大值会显示 `{max}+`,要求 `value` 是 `Number` 类型|number|—|—|\n|is-dot|小圆点|boolean|—|false|\n|hidden|隐藏 `Badge`|boolean|—|false|\n|type|类型|string|`primary` / `success` / `warning` / `danger` / `info`|—|\n|show-zero|值为零时是否显示 `Badge`|boolean|—|true|\n|background-color|背景色|string|—|—|\n|offset|`Badge` 的偏移量,格式是`[左,上]`, 代表状态点从左侧和默认位置顶部的偏移|array|—|—|\n|badge-style|自定义 `Badge` 样式,如果样式复杂建议使用 `badge-class`|object|—|—|\n|badge-class|自定义 `Badge` 类名|string|—|—|\n\n\n ----- \n\n#### ElBadge Slots\n\n|名称|说明|\n|:---|:---|\n|default|自定义默认内容|\n" }, "el-breadcrumb": { "attributes": [ "separator", "size", "separator-class" ], "description": "### [ElBreadcrumb](https://ui.const.team/#/component/breadcrumb)\n\n显示当前页面的路径,快速返回之前的任意页面。\n\n ----- \n\n#### ElBreadcrumb Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|separator|分隔符|string|—|'/'|\n|size|尺寸,继承全局尺寸|string|`medium` / `small` / `mini`|—|\n|separator-class|图标分隔符 `class`|string|—|—|\n", "subtags": [ "el-breadcrumb-item" ] }, "el-breadcrumb-item": { "attributes": [ "title", "to", "replace" ], "description": "### [ElBreadcrumbItem](https://ui.const.team/#/component/breadcrumb#breadcrumbitem-attributes)\n\n面包屑组件的子集。\n\n ----- \n\n#### ElBreadcrumbItem Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|title|标题,此属性优先级高于插槽|string|—|—|\n|to|路由跳转对象,同 `vue-router` 的 `to`|string / object|—|—|\n|replace|在使用 `to` 进行路由跳转时,启用 `replace` 将不会向 `history` 添加新记录|boolean|—|false|\n" }, "el-button": { "attributes": [ "size", "type", "plain", "round", "circle", "dashed", "square", "loading", "disabled", "icon", "icon-right", "autofocus", "native-type" ], "description": "### [ElButton](https://ui.const.team/#/component/button)\n\n常用的操作按钮。\n\n ----- \n\n#### ElButton Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|size|尺寸|string|`medium` / `small` / `mini`|—|\n|type|类型|string|`primary` / `success` / `warning` / `danger` / `info` / `text`|—|\n|plain|是否朴素按钮|boolean|—|false|\n|round|是否圆角按钮|boolean|—|false|\n|circle|是否圆形按钮|boolean|—|false|\n|dashed|是否虚线按钮|boolean|—|false|\n|square|是否方形按钮|boolean|—|false|\n|loading|是否加载中状态|boolean|—|false|\n|disabled|是否禁用状态|boolean|—|false|\n|icon|图标类名|string|—|—|\n|icon-right|图标类名,显示在文字右侧|string|—|—|\n|autofocus|是否默认聚焦|boolean|—|false|\n|native-type|原生 `type` 属性|string|`button` / `submit` / `reset`|button|\n" }, "el-button-group": { "attributes": [], "description": "### [ElButtonGroup](https://ui.const.team/#/component/button)\n\n显示为按钮组,可用于对一系列类似操作进行分组。\n\n ----- \n\n", "subtags": [ "el-button" ] }, "el-calendar": { "attributes": [ "value", "v-model", "range", "first-day-of-week" ], "description": "### [ElCalendar](https://ui.const.team/#/component/calendar)\n\n显示日期。\n\n ----- \n\n#### ElCalendar Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|value / v-model|绑定值|date / string / number|—|—|\n|range|时间范围,包括开始时间与结束时间,开始时间必须是周一,结束时间必须是周日,且时间跨度不能超过两个月|array|—|—|\n|first-day-of-week|周起始日|number|`1` / `2` / `3` / `4` / `5` / `6` / `7`|1|\n\n\n ----- \n\n#### ElCalendar Scoped Slot\n\n|名称|说明|\n|:---|:---|\n|date-cell|单元格插槽,[参数如下](https://ui.const.team/#/component/calendar#datecell-parameters)|\n|header|日历面板标题内容,[参数如下](https://ui.const.team/#/component/calendar#header-parameters)|\n\n\n" }, "el-card": { "attributes": [ "header", "footer", "body-style", "shadow" ], "description": "### [ElCard](https://ui.const.team/#/component/card)\n\n将信息聚合在卡片容器中展示。\n\n ----- \n\n#### ElCard Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|header|设置 `header`,也可以通过 `slot#header` 传入 `DOM`|string|—|—|\n|footer|设置 `footer`,也可以通过 `slot#footer` 传入 `DOM`|string|—|—|\n|body-style|设置 `body` 的样式|object|—|{ padding: '20px' }|\n|shadow|设置阴影显示时机|string|`always` / `hover` / `never`|always|\n\n\n ----- \n\n#### ElCard Slots\n\n|名称|说明|\n|:---|:---|\n|default|自定义默认内容|\n|header|卡片标题内容|\n|footer|卡片页脚内容|\n" }, "el-carousel": { "attributes": [ "width", "height", "initial-index", "trigger", "autoplay", "interval", "indicator-position", "arrow", "type", "loop", "direction" ], "description": "### [ElCarousel](https://ui.const.team/#/component/carousel)\n\n在有限空间内,循环播放同一类型的图片、文字等内容。\n\n ----- \n\n#### ElCarousel Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|width|走马灯的宽度|string|—|—|\n|height|走马灯的高度|string|—|—|\n|initial-index|初始状态激活的幻灯片的索引,从 0 开始|number|—|0|\n|trigger|指示器的触发方式|string|`click` / `hover`|hover|\n|autoplay|是否自动切换|boolean|—|true|\n|interval|自动切换的时间间隔,单位为毫秒|number|—|3000|\n|indicator-position|指示器的位置|string|`outside` / `none`|—|\n|arrow|切换箭头的显示时机|string|`always` / `hover` / `never`|hover|\n|type|走马灯的类型|string|`card`|—|\n|loop|是否循环显示|boolean|—|true|\n|direction|走马灯展示的方向|string|`horizontal` / `vertical`|horizontal|\n\n\n ----- \n\n#### ElCarousel Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|change|幻灯片切换时触发|目前激活的幻灯片的索引,原幻灯片的索引|\n\n\n ----- \n\n#### ElCarousel Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|setActiveItem|手动切换幻灯片|需要切换的幻灯片的索引,从 0 开始;或相应 `el-carousel-item` 的 `name` 属性值|\n|prev|切换至上一张幻灯片|—|\n|next|切换至下一张幻灯片|—|\n", "subtags": [ "el-carousel-item" ] }, "el-carousel-item": { "attributes": [ "name", "label", "lazy" ], "description": "### [ElCarouselItem](https://ui.const.team/#/component/carousel#carouselitem-attributes)\n\n走马灯组件的子集。\n\n ----- \n\n#### ElCarouselItem Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|name|幻灯片的名字,可用作 `setActiveItem` 的参数|string|—|—|\n|label|该幻灯片所对应指示器的文本|string|—|—|\n|lazy|是否懒加载|boolean|—|false|\n" }, "el-cascader": { "attributes": [ "value", "v-model", "options", "props", "size", "placeholder", "placement", "disabled", "clearable", "show-all-levels", "collapse-tags", "collapse-tags-max-num", "separator", "filterable", "filter-method", "debounce", "before-filter", "popper-class", "option-max-width", "popper-max-width", "popper-append-to-body", "visible-arrow", "overlay", "tag-type" ], "description": "### [ElCascader](https://ui.const.team/#/component/cascader)\n\n当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。\n\n ----- \n\n#### ElCascader Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|value / v-model|选中项绑定值|string / number / object|—|—|\n|options|可选项数据源,键名可通过 `Props` 属性配置|array|—|—|\n|props|配置选项,具体见 [Props配置](https://ui.const.team/#/component/cascader#props)|object|—|—|\n|size|尺寸,继承全局尺寸或者表单尺寸|string|`medium` / `small` / `mini`|—|\n|placeholder|输入框占位文本|string|—|请选择|\n|placement|下拉框出现的位置|string|`top` / `top-start` / `top-end` / `bottom` / `bottom-start` / `bottom-end` / `left` / `left-start` / `left-end` / `right` / `right-start` / `right-end`|bottom-start|\n|disabled|是否禁用|boolean|—|false|\n|clearable|是否支持清空选项|boolean|—|false|\n|show-all-levels|输入框中是否显示选中值的完整路径|boolean|—|true|\n|collapse-tags|多选模式下是否折叠 `Tag`|boolean|—|false|\n|collapse-tags-max-num|多选模式下设置多少后开始折叠|number|—|1|\n|separator|选项分隔符|string|—|'/'|\n|filterable|是否可搜索选项|boolean|—|—|\n|filter-method|自定义搜索逻辑,第一个参数是节点 `node`,第二个参数是搜索关键词 `keyword`,通过返回布尔值表示是否命中|function(node, keyword)|—|—|\n|debounce|搜索关键词输入的去抖延迟,单位为毫秒|number|—|300|\n|before-filter|筛选之前的钩子,参数为输入的值,若返回 `false` 或者返回 `Promise` 且被 `reject`,则停止筛选|function(value)|—|—|\n|popper-class|自定义浮层类名|string|—|—|\n|option-max-width|选项框最大宽度,默认不限制|string / number|—|—|\n|popper-max-width|折叠下拉最大宽度|string / number|—|300|\n|popper-append-to-body|是否将弹出框插入至 `body` 元素,在弹出框的定位出现问题时,可将该属性设置为 `false`|boolean|—|true|\n|visible-arrow|是否显示 `Tooltip` 箭头|boolean|—|false|\n|overlay|搜索框是否显示在下拉菜单中|boolean|—|false|\n|tag-type|标签类型|string|`success` / `info` / `warning` / `danger`|info|\n\n\n ----- \n\n#### ElCascader Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|change|当选中节点变化时触发|选中节点的值|\n|expand-change|当展开节点发生变化时触发|各父级选项值组成的数组|\n|blur|当失去焦点时触发|(event: Event)|\n|focus|当获得焦点时触发|(event: Event)|\n|visible-change|下拉框出现/隐藏时触发|出现则为 true,隐藏则为 false|\n|remove-tag|在多选模式下,移除 `Tag` 时触发|移除的 Tag 对应的节点的值|\n|clear|在点击由 `clearable` 属性生成的清空按钮时触发|清空前的值|\n|select-node|在点击 `checkbox` 或者 `radio` 时返回当前点击节点的 node 节点|node|\n\n\n ----- \n\n#### ElCascader Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|getCheckedNodes|获取选中的节点|(leafOnly) 是否只是叶子节点,默认值为 `false`|\n\n\n ----- \n\n#### ElCascader Slots\n\n|名称|说明|\n|:---|:---|\n|empty|无选项时的列表|\n|search-empty|无匹配选项时的内容|\n|header|级联框顶部扩展内容|\n|extend|级联框底部扩展内容|\n\n\n ----- \n\n#### ElCascader Scoped Slot\n\n|名称|说明|\n|:---|:---|\n|default|自定义备选项的节点内容,参数为 `{ node, data }`,分别为当前节点的 Node 对象和数据|\n|search-node|自定义搜索节点内容,参数为 `{ node, data }`,分别为当前节点的 Node 对象和数据|\n|tag|自定义 `tag` 标签内容|\n\n\n" }, "el-cascader-panel": { "attributes": [ "value", "v-model", "options", "props", "size" ], "description": "### [ElCascaderPanel](https://ui.const.team/#/component/cascader#cascaderpanel-attributes)\n\n级联面板,可独立使用,不依赖于 Cascader 组件。\n\n ----- \n\n#### ElCascaderPanel Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|value / v-model|选中项绑定值|string / number / object|—|—|\n|options|可选项数据源,键名可通过 `Props` 属性配置|array|—|—|\n|props|配置选项,具体见 [Props配置](https://ui.const.team/#/component/cascader#props)|object|—|—|\n|size|尺寸|string|`medium` / `small` / `mini`|—|\n\n\n ----- \n\n#### ElCascaderPanel Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|change|当选中节点变化时触发|选中节点的值|\n|expand-change|当展开节点发生变化时触发|各父级选项值组成的数组|\n\n\n ----- \n\n#### ElCascaderPanel Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|getCheckedNodes|获取选中的节点数组|(leafOnly) 是否只是叶子节点,默认值为 `false`|\n|clearCheckedNodes|清空选中的节点|—|\n\n\n ----- \n\n#### ElCascaderPanel Scoped Slot\n\n|名称|说明|\n|:---|:---|\n|default|自定义备选项的节点内容,参数为 `{ node, data }`,分别为当前节点的 Node 对象和数据|\n\n\n" }, "el-checkbox": { "attributes": [ "value", "v-model", "label", "true-label", "false-label", "disabled", "border", "size", "name", "checked", "indeterminate" ], "description": "### [ElCheckbox](https://ui.const.team/#/component/checkbox)\n\n一组备选项中进行多选。\n\n ----- \n\n#### ElCheckbox Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|value / v-model|绑定值|string / number / boolean|—|—|\n|label|选中状态的值(只有在 `checkbox-group` 或者绑定对象类型为 `Array` 时有效)|string / number / boolean|—|—|\n|true-label|选中时的值|string / number|—|—|\n|false-label|没有选中时的值|string / number|—|—|\n|disabled|是否禁用|boolean|—|false|\n|border|是否显示边框|boolean|—|false|\n|size|`Checkbox` 的尺寸,继承全局尺寸或者表单尺寸|string|`medium` / `small` / `mini`|—|\n|name|原生 `name` 属性|string|—|—|\n|checked|当前是否勾选|boolean|—|false|\n|indeterminate|设置 `indeterminate` 状态,只负责样式控制|boolean|—|false|\n\n\n ----- \n\n#### ElCheckbox Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|change|当绑定值变化时触发的事件|更新后的值|\n" }, "el-checkbox-button": { "attributes": [ "label", "true-label", "false-label", "disabled", "name", "checked" ], "description": "### [ElCheckboxButton](https://ui.const.team/#/component/checkbox#checkboxbutton-attributes)\n\n复选框以按钮形式展示。\n\n ----- \n\n#### ElCheckboxButton Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|label|选中状态的值(只有在 `checkbox-group` 或者绑定对象类型为 `Array` 时有效)|string / number / boolean|—|—|\n|true-label|选中时的值|string / number|—|—|\n|false-label|没有选中时的值|string / number|—|—|\n|disabled|是否禁用|boolean|—|false|\n|name|原生 `name` 属性|string|—|—|\n|checked|当前是否勾选|boolean|—|false|\n" }, "el-checkbox-tag": { "attributes": [ "label", "true-label", "false-label", "disabled", "name", "icon", "type", "checked" ], "description": "### [ElCheckboxTag](https://ui.const.team/#/component/checkbox#checkboxtag-attributes)\n\n复选框以标签形式展示。\n\n ----- \n\n#### ElCheckboxTag Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|label|选中状态的值(只有在 `checkbox-group` 或者绑定对象类型为 `Array` 时有效)|string / number / boolean|—|—|\n|true-label|选中时的值|string / number|—|—|\n|false-label|没有选中时的值|string / number|—|—|\n|disabled|是否禁用|boolean|—|false|\n|name|原生 `name` 属性|string|—|—|\n|icon|图标类名|string|—|—|\n|type|类型|string|`primary` / `success` / `warning` / `danger` / `info`|primary|\n|checked|当前是否勾选|boolean|—|false|\n" }, "el-checkbox-group": { "attributes": [ "value", "v-model", "size", "disabled", "min", "max", "text-color", "fill" ], "description": "### [ElCheckboxGroup](https://ui.const.team/#/component/checkbox#checkboxgroup-attributes)\n\n复选框组,可一次勾选多个复选框。\n\n ----- \n\n#### ElCheckboxGroup Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|value / v-model|绑定值|array|—|—|\n|size|多选框组尺寸,继承全局尺寸或者表单尺寸|string|`medium` / `small` / `mini`|—|\n|disabled|是否禁用|boolean|—|false|\n|min|可被勾选的 `Checkbox` 的最小数量|number|—|—|\n|max|可被勾选的 `Checkbox` 的最大数量|number|—|—|\n|text-color|按钮形式的 `Checkbox` 激活时的文本颜色|string|—|#FFF|\n|fill|按钮形式的 `Checkbox` 激活时的填充色和边框色|string|—|#1890FF|\n\n\n ----- \n\n#### ElCheckboxGroup Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|change|当绑定值变化时触发的事件|更新后的值|\n", "subtags": [ "el-checkbox", "el-checkbox-button", "el-checkbox-tag" ] }, "el-collapse": { "attributes": [ "value", "v-model", "accordion", "icon-text", "open-text", "close-text", "icon-trigger", "card", "default-expand-all" ], "description": "### [ElCollapse](https://ui.const.team/#/component/collapse)\n\n通过折叠面板收纳内容区域。\n\n ----- \n\n#### ElCollapse Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|value / v-model|当前激活的面板(如果是手风琴模式,绑定值类型需要为 `String`,否则为 `Array`)|string / array|—|—|\n|accordion|是否手风琴模式|boolean|—|false|\n|icon-text|展开图标是否显示文字|boolean|—|false|\n|open-text|展开文字|string|—|展开|\n|close-text|收起文字|string|—|收起|\n|icon-trigger|点击图标展开收起|boolean|—|false|\n|card|是否卡片风格|boolean|—|false|\n|default-expand-all|是全部展开|boolean|—|false|\n\n\n ----- \n\n#### ElCollapse Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|change|当前激活面板改变时触发(如果是手风琴模式,参数 `activeNames` 类型为 `String`,否则为 `Array`)|(activeNames: array / string)|\n\n\n ----- \n\n#### ElCollapse Slots\n\n|名称|说明|\n|:---|:---|\n|default|自定展示内容,一般为 `<el-collapse-item>` 组件|\n", "subtags": [ "el-collapse-item" ] }, "el-collapse-item": { "attributes": [ "name", "title", "disabled", "lazy", "trigger" ], "description": "### [ElCollapseItem](https://ui.const.team/#/component/collapse#collapseitem-attributes)\n\n折叠面板组件子集,不能单独使用。\n\n ----- \n\n#### ElCollapseItem Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|name|唯一标志符|string / number|—|—|\n|title|面板标题|string|—|—|\n|disabled|是否禁用|boolean|—|—|\n|lazy|是否懒加载|boolean|—|false|\n|trigger|点击图标展开收起|string|—|icon|\n\n\n ----- \n\n#### ElCollapseItem Slots\n\n|名称|说明|\n|:---|:---|\n|default|自定展示内容|\n|title|面板标题|\n" }, "el-color-picker": { "attributes": [ "value", "v-model", "disabled", "readonly", "clearable", "size", "show-alpha", "color-format", "popper-class", "predefine", "append-to-body", "visible-arrow", "placement" ], "description": "### [ElColorPicker](https://ui.const.team/#/component/color-picker)\n\n用于颜色选择,支持多种格式。\n\n ----- \n\n#### ElColorPicker Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|value / v-model|绑定值|string|—|—|\n|disabled|是否禁用|boolean|—|false|\n|readonly|是否只读|boolean|—|false|\n|clearable|是否显示清除按钮|boolean|—|true|\n|size|尺寸,继承全局尺寸或者表单尺寸|string|`medium` / `small` / `mini`|—|\n|show-alpha|是否支持透明度选择|boolean|—|false|\n|color-format|写入 `v-model` 的颜色的格式|string|`hsl` / `hsv` / `hex` / `rgb`|hex(show-alpha 为 false)/ rgb(show-alpha 为 true)|\n|popper-class|下拉框的类名|string|—|—|\n|predefine|预定义颜色|array|—|—|\n|append-to-body|下拉面板是否插入至 `body` 元素上|boolean|—|true|\n|visible-arrow|是否显示 `Tooltip` 箭头|boolean|—|false|\n|placement|下拉框出现的位置|string|`top` / `top-start` / `top-end` / `bottom` / `bottom-start` / `bottom-end` / `left` / `left-start` / `left-end` / `right` / `right-start` / `right-end`|bottom|\n\n\n ----- \n\n#### ElColorPicker Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|change|当绑定值变化时触发|当前值|\n|active-change|面板中当前显示的颜色发生改变时触发|当前显示的颜色值|\n|clear|在点击由 `clearable` 属性生成的清空按钮时触发|清空前的值|\n|visible-change|下拉框出现 / 隐藏时触发|出现则为 true,隐藏则为 false|\n|focus|当获得焦点时触发|event|\n|blur|当获得焦点时触发|event|\n\n\n ----- \n\n#### ElColorPicker Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|show|手动显示颜色选择器|—|\n|hide|手动隐藏颜色选择器|—|\n|focus|使 `Picker` 获得焦点|—|\n|blur|使 `Picker` 失去焦点|—|\n" }, "el-container": { "attributes": [ "direction" ], "description": "### [ElContainer](https://ui.const.team/#/component/container#container-attributes)\n\n用于布局的容器组件,方便快速搭建页面的基本结构。\n\n ----- \n\n#### ElContainer Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|direction|子元素的排列方向|string|`horizontal` / `vertical`|子元素中有 `el-header` 或 `el-footer` 时为 `vertical`,否则为 `horizontal`|\n", "subtags": [ "el-aside", "el-header", "el-main", "el-footer" ] }, "el-main": { "attributes": [], "description": "### [ElMain](undefined)\n\n内容容器。\n\n ----- \n\n" }, "el-header": { "attributes": [ "height" ], "description": "### [ElHeader](https://ui.const.team/#/component/container#header-attributes)\n\n顶栏容器。\n\n ----- \n\n#### ElHeader Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|height|顶栏高度|string|—|60px|\n" }, "el-aside": { "attributes": [ "width" ], "description": "### [ElAside](https://ui.const.team/#/component/container#aside-attributes)\n\n侧边栏容器\n\n ----- \n\n#### ElAside Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|width|侧边栏宽度|string|—|300px|\n" }, "el-footer": { "attributes": [ "height" ], "description": "### [ElFooter](https://ui.const.team/#/component/container#footer-attributes)\n\n底栏容器。\n\n ----- \n\n#### ElFooter Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|height|底栏高度|string|—|60px|\n" }, "el-date-picker": { "attributes": [ "value", "v-model", "readonly", "disabled", "editable", "clearable", "size", "placeholder", "start-placeholder", "end-placeholder", "type", "format", "placement", "popper-class", "picker-options", "range-separator", "default-value", "default-time", "value-format", "name", "unlink-panels", "prefix-icon", "clear-icon", "validate-event", "append-to-body", "visible-arrow", "show-week-number", "controllable" ], "description": "### [ElDatePicker](https://ui.const.team/#/component/date-picker)\n\n用于选择或输入日期。\n\n ----- \n\n#### ElDatePicker Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|value / v-model|绑定值|date(DatePicker) / array(DateRangePicker)|—|—|\n|readonly|完全只读|boolean|—|false|\n|disabled|禁用|boolean|—|false|\n|editable|文本框可输入|boolean|—|true|\n|clearable|是否显示清除按钮|boolean|—|true|\n|size|输入框尺寸,继承全局尺寸或者表单尺寸|string|`medium` / `small` / `mini`|—|\n|placeholder|非范围选择时的占位内容|string|—|—|\n|start-placeholder|范围选择时开始日期的占位内容|string|—|—|\n|end-placeholder|范围选择时结束日期的占位内容|string|—|—|\n|type|显示类型|string|`year` / `years` / `yearrange` / `quarter` / `quarters` / `quarterrange` / `month` / `months` / `monthrange` / `week` / `weeks` / `weekrange` / `date` / `dates` / `daterange` / `datetime` / `datetimerange`|date|\n|format|显示在输入框中的格式|string|见[日期格式](https://ui.const.team/#/component/date-picker#ri-qi-ge-shi)|yyyy-MM-dd|\n|placement|下拉框出现的位置|string|`top` / `top-start` / `top-end` / `bottom` / `bottom-start` / `bottom-end` / `left` / `left-start` / `left-end` / `right` / `right-start` / `right-end`|bottom-start|\n|popper-class|`DatePicker` 下拉框的类名|string|—|—|\n|picker-options|当前时间日期选择器特有的选项参考 [PickerOptions配置](https://ui.const.team/#/component/date-picker#pickeroptions)|object|—|{}|\n|range-separator|选择范围时的分隔符|string|—|'-'|\n|default-value|可选,选择器打开时默认显示的时间|date|可被`new Date()`解析|—|\n|default-time|范围选择时选中日期所使用的当日内具体时刻|string[]|数组,长度为 2,每项值为字符串,形如`12:00:00`,第一项指定开始日期的时刻,第二项指定结束日期的时刻,不指定会使用时刻 `00:00:00`|—|\n|value-format|可选,绑定值的格式,不指定则绑定值为 `Date` 对象|string|见[日期格式](https://ui.const.team/#/component/date-picker#ri-qi-ge-shi)|—|\n|name|原生属性|string|—|—|\n|unlink-panels|在范围选择器里取消两个日期面板之间的联动|boolean|—|false|\n|prefix-icon|自定义头部图标的类名|string|—|el-icon-date|\n|clear-icon|自定义清空图标的类名|string|—|el-icon-circle-close|\n|validate-event|输入时是否触发表单的校验|boolean|—|true|\n|append-to-body|`DatePicker` 自身是否插入至 `body` 元素上|boolean|—|true|\n|visible-arrow|是否显示 `Tooltip` 箭头|boolean|—|false|\n|show-week-number|是否显示周次,仅在周类型下有效|boolean|—|false|\n|controllable|是否键盘上下左右控制选择日期,当在多选日期时配置为 `true` 不会生效|boolean|—|true|\n\n\n ----- \n\n#### ElDatePicker Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|change|用户确认选定的值时触发|组件绑定值,格式与绑定值一致,可受 `value-format` 控制|\n|blur|当 `Input` 失去焦点时触发|组件实例|\n|focus|当 `Input` 获得焦点时触发|组件实例|\n|clear|在点击由 `clearable` 属性生成的清空按钮时触发|清空前的值|\n|visible-change|下拉框出现 / 隐藏时触发|出现则为 true,隐藏则为 false|\n\n\n ----- \n\n#### ElDatePicker Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|focus|使 `Input` 获取焦点|—|\n\n\n ----- \n\n#### ElDatePicker Slots\n\n|名称|说明|\n|:---|:---|\n|range-separator|自定义分隔符,仅针对区间类型有效|\n|sidebar|日期面板侧边插槽|\n|header|日期面板头部插槽|\n\n\n ----- \n\n#### ElDatePicker Scoped Slot\n\n|名称|说明|\n|:---|:---|\n|year|自定义年内容|\n|quarter|自定义季度内容|\n|month|自定义月内容|\n|date|自定义日内容|\n\n\n" }, "el-descriptions": { "attributes": [ "border", "column", "direction", "size", "title", "extra", "colon", "label-class-name", "content-class-name", "label-style", "content-style", "label-align", "label-width" ], "description": "### [ElDescriptions](https://ui.const.team/#/component/descriptions)\n\n列表形式展示多个字段。\n\n ----- \n\n#### ElDescriptions Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|border|是否带有边框|boolean|—|false|\n|column|一行 `<el-descriptions-item>` 的数量|number|—|3|\n|direction|排列的方向|string|`vertical` / `horizontal`|horizontal|\n|size|列表的尺寸,继承全局尺寸|string|`medium` / `small` / `mini`|—|\n|title|标题文本,显示在左上方|string|—|—|\n|extra|操作区文本,显示在右上方|string|—|—|\n|colon|是否显示冒号|boolean|—|true|\n|label-class-name|自定义标签类名|string|—|—|\n|content-class-name|自定义内容类名|string|—|—|\n|label-style|自定义标签样式|object|—|—|\n|content-style|自定义内容样式|object|—|—|\n|label-align|`label` 标签对齐方式|string|`left` / `center` / `right`|—|\n|label-width|`label` 的宽度|number|—|—|\n\n\n ----- \n\n#### ElDescriptions Slots\n\n|名称|说明|\n|:---|:---|\n|default|自定义内容,一般为 `<el-descriptions-item>` 组件|\n|title|自定义标题,显示在左上方|\n|extra|自定义操作区,显示在右上方|\n", "subtags": [ "el-descriptions-item" ] }, "el-descriptions-item": { "attributes": [ "label", "span", "rowspan", "label-align", "label-width", "label-class-name", "content-class-name", "label-style", "content-style" ], "description": "### [ElDescriptionsItem](https://ui.const.team/#/component/descriptions#descriptionsitem-attributes)\n\n描述列表组件子集,在描述列表组件中使用。\n\n ----- \n\n#### ElDescriptionsItem Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|label|标签文本|string|—|—|\n|span|列的数量|number|—|1|\n|rowspan|单元格应该跨越的行数|number|—|1|\n|label-align|`label` 标签对齐方式(优先级高)|string|`left` / `center` / `right`|left|\n|label-width|列的宽度(优先级高)|number|—|—|\n|label-class-name|自定义标签类名|string|—|—|\n|content-class-name|自定义内容类名|string|—|—|\n|label-style|自定义标签样式|object|—|—|\n|content-style|自定义内容样式|object|—|—|\n\n\n ----- \n\n#### ElDescriptionsItem Slots\n\n|名称|说明|\n|:---|:---|\n|default|自定展示内容|\n|label|自定义标签文本|\n" }, "el-dialog": { "attributes": [ "visible", "title", "width", "height", "min-width", "max-width", "min-height", "max-height", "fullscreen", "draggable", "resizable", "top", "modal", "penetrate", "modal-append-to-body", "append-to-body", "lock-scroll", "wrapper-class", "custom-class", "close-on-click-modal", "close-on-press-escape", "show-close", "before-close", "center", "destroy-on-close" ], "description": "### [ElDialog](https://ui.const.team/#/component/dialog)\n\n在保留当前页面状态的情况下,告知用户并承载相关操作。\n\n ----- \n\n#### ElDialog Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|visible|是否显示 `Dialog`,支持 `.sync` 修饰符|boolean|—|false|\n|title|`Dialog` 的标题,也可通过具名 `slot` 传入|string|—|—|\n|width|`Dialog` 的宽度|string|—|50%|\n|height|`Dialog` 的高度|string|—|—|\n|min-width|`Dialog` 的最小宽度|string|—|—|\n|max-width|`Dialog` 的最大宽度|string|—|—|\n|min-height|`Dialog` 的最小高度|string|—|—|\n|max-height|`Dialog` 的最大高度|string|—|—|\n|fullscreen|是否为全屏 `Dialog`|boolean|—|false|\n|draggable|是否可以通过拖动标题移动 `Dialog`,此属性设置后再改变不会生效|boolean|—|false|\n|resizable|是否可以拖拽改变 `Dialog` 宽高,此属性设置后再改变不会生效|boolean|—|false|\n|top|`Dialog` 的 `margin-top` 值|string|—|15vh|\n|modal|是否需要遮罩层|boolean|—|true|\n|penetrate|是否可以穿透弹窗以外的内容,需要 `modal` 属性为 `false` 配合使用|boolean|—|false|\n|modal-append-to-body|遮罩层是否插入至 `body` 元素上,若为 `false`,则遮罩层会插入至 `Dialog` 的父元素上|boolean|—|true|\n|append-to-body|`Dialog` 自身是否插入至 `body` 元素上,嵌套的 `Dialog` 必须指定该属性并赋值为 `true`|boolean|—|false|\n|lock-scroll|是否在 `Dialog` 出现时将 `body` 滚动锁定|boolean|—|true|\n|wrapper-class|`Dialog Wrapper` 的自定义类名|string|—|—|\n|custom-class|`Dialog` 的自定义类名|string|—|—|\n|close-on-click-modal|是否可以通过点击 `modal` 关闭 `Dialog`|boolean|—|true|\n|close-on-press-escape|是否可以通过按下 `ESC` 关闭 `Dialog`|boolean|—|true|\n|show-close|是否显示关闭按钮|boolean|—|true|\n|before-close|关闭前的回调,会暂停 `Dialog` 的关闭|function(done),done 用于关闭 Dialog|—|—|\n|center|是否对头部和底部采用居中布局|boolean|—|false|\n|destroy-on-close|关闭时销毁 `Dialog` 中的元素|boolean|—|false|\n\n\n ----- \n\n#### ElDialog Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|open|`Dialog` 打开的回调|—|\n|opened|`Dialog` 打开动画结束时的回调|—|\n|close|`Dialog` 关闭的回调|—|\n|closed|`Dialog` 关闭动画结束时的回调|—|\n|resize|`Dialog` 拖拽大小时回调|width, height|\n|dragend|`Dialog` 拖拽位置后回调|event|\n\n\n ----- \n\n#### ElDialog Methods\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|resetPosition|`Dialog` 重置位置|—|\n\n\n ----- \n\n#### ElDialog Slots\n\n|名称|说明|\n|:---|:---|\n|default|`Dialog` 的内容|\n|title|`Dialog` 标题区的内容|\n|footer|`Dialog` 按钮操作区的内容|\n" }, "el-divider": { "attributes": [ "direction", "content-position" ], "description": "### [ElDivider](https://ui.const.team/#/component/divider)\n\n区隔内容的分割线。\n\n ----- \n\n#### ElDivider Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|direction|设置分割线方向|string|`horizontal` / `vertical`|horizontal|\n|content-position|设置分割线文案的位置|string|`left` / `right` / `center`|center|\n\n\n ----- \n\n#### ElDivider Slots\n\n|名称|说明|\n|:---|:---|\n|default|默认展示内容|\n|left|左侧插槽|\n|center|中间插槽|\n|right|右侧插槽|\n" }, "el-drawer": { "attributes": [ "append-to-body", "before-close", "close-on-press-escape", "custom-class", "destroy-on-close", "modal", "modal-append-to-body", "direction", "show-close", "size", "title", "visible", "wrapper-closable", "with-header" ], "description": "### [ElDrawer](https://ui.const.team/#/component/drawer)\n\n有些时候, `Dialog` 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, `Drawer` 拥有和 `Dialog` 几乎相同的 `API`, 在 `UI` 上带来不一样的体验。\n\n ----- \n\n#### ElDrawer Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|append-to-body|`Drawer` 自身是否插入至 `body` 元素上,嵌套的 `Drawer` 必须指定该属性并赋值为 true|boolean|—|true|\n|before-close|关闭前的回调,会暂停 `Drawer` 的关闭|function(done),done 用于关闭 Drawer|—|—|\n|close-on-press-escape|是否可以通过按下 `ESC` 关闭 Drawer|boolean|—|true|\n|custom-class|`Drawer` 的自定义类名|string|—|—|\n|destroy-on-close|控制是否在关闭 `Drawer` 之后将子元素全部销毁|boolean|—|false|\n|modal|是否需要遮罩层|boolean|—|true|\n|modal-append-to-body|遮罩层是否插入至 `body` 元素上,若为 `false`,则遮罩层会插入至 `Drawer` 的父元素上|boolean|—|true|\n|direction|`Drawer` 打开的方向|string|`rtl` / `ltr` / `ttb` / `btt`|rtl|\n|show-close|是否显示关闭按钮|boolean|—|true|\n|size|`Drawer` 窗体的大小, 当使用 `Number` 类型时, 以像素为单位, 当使用 `String` 类型时, 请传入 `x%`, 否则便会以 `Number` 类型解释|number / string|—|30%|\n|title|`Drawer` 的标题,也可通过具名 `slot` 传入|string|—|—|\n|visible|是否显示 `Drawer`,支持 `.sync` 修饰符|boolean|—|false|\n|wrapper-closable|点击遮罩层是否可以关闭 Drawer|boolean|—|true|\n|with-header|控制是否显示 `header` 栏, 默认为 `true`, 当此项为 `false` 时, `attribute` 和 `slot` 均不生效|boolean|—|true|\n\n\n ----- \n\n#### ElDrawer Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|open|`Drawer` 打开的回调|—|\n|opened|`Drawer` 打开动画结束时的回调|—|\n|close|`Drawer` 关闭的回调|—|\n|closed|`Drawer` 关闭动画结束时的回调|—|\n\n\n ----- \n\n#### ElDrawer Methods\n\n|方法名|说明|\n|:---|:---|\n|closeDrawer|用于关闭 `Drawer`, 该方法会调用传入的 `before-close` 方法|\n\n\n ----- \n\n#### ElDrawer Slots\n\n|名称|说明|\n|:---|:---|\n|default|`Drawer` 的内容|\n|title|`Drawer` 标题区的内容|\n|footer|`Drawer` 底部的内容|\n" }, "el-dropdown": { "attributes": [ "type", "size", "disabled", "controllable", "split-button", "placement", "trigger", "hide-on-click", "show-timeout", "hide-timeout", "tabindex" ], "description": "### [ElDropdown](https://ui.const.team/#/component/dropdown)\n\n将动作或菜单折叠到下拉菜单中。\n\n ----- \n\n#### ElDropdown Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|type|菜单按钮类型,同 `Button` 组件(只在 `split-button` 为 `true` 的情况下有效)|string|—|—|\n|size|菜单尺寸,在 `split-button` 为 `true` 的情况下也对触发按钮生效,继承全局尺寸|string|`medium` / `small` / `mini`|—|\n|disabled|是否禁用|boolean|—|false|\n|controllable|是否键盘控制选择|boolean|—|true|\n|split-button|下拉触发元素呈现为按钮组|boolean|—|false|\n|placement|菜单弹出位置|string|`top` / `top-start` / `top-end` / `bottom` / `bottom-start` / `bottom-end` / `left` / `left-start` / `left-end` / `right` / `right-start` / `right-end`|bottom-end|\n|trigger|触发下拉的行为|string|`hover` / `click` / `contextmenu`|hover|\n|hide-on-click|是否在点击菜单项后隐藏菜单|boolean|—|true|\n|show-timeout|展开下拉菜单的延时(仅在 `trigger` 为 `hover` 时有效)|number|—|250|\n|hide-timeout|收起下拉菜单的延时(仅在 `trigger` 为 `hover` 时有效)|number|—|150|\n|tabindex|`Dropdown` 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)|number|—|0|\n\n\n ----- \n\n#### ElDropdown Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|click|`split-button` 为 `true` 时,点击左侧按钮的回调|—|\n|command|点击菜单项触发的事件回调|dropdown-item 的指令|\n|visible-change|下拉框出现 / 隐藏时触发|出现则为 true,隐藏则为 false|\n\n\n ----- \n\n#### ElDropdown Slots\n\n|名称|说明|\n|:---|:---|\n|default|触发下拉列表显示的元素,注意: 必须是一个元素或者或者组件|\n|dropdown|下拉列表,通常是 `<el-dropdown-menu>` 组件|\n", "subtags": [ "el-dropdown-menu" ] }, "el-dropdown-menu": { "attributes": [ "visible-arrow", "dropdown-max-width" ], "description": "### [ElDropdownMenu](https://ui.const.team/#/component/dropdown#dropdownmenu-attributes)\n\n下拉菜单组件,需要配合下拉菜单组件使用。\n\n ----- \n\n#### ElDropdownMenu Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|visible-arrow|是否显示 `Tooltip` 箭头|boolean|—|false|\n|dropdown-max-width|下拉框最大宽度|string / number|—|—|\n\n\n ----- \n\n#### ElDropdownMenu Slots\n\n|名称|说明|\n|:---|:---|\n|default|下拉菜单的内容,通常为 `<el-dropdown-item>` 组件|\n|header-extend|下拉列表顶部扩展插槽|\n|extend|下拉列表底部扩展插槽|\n", "subtags": [ "el-dropdown-item" ] }, "el-dropdown-item": { "attributes": [ "command", "disabled", "divided", "icon" ], "description": "### [ElDropdownItem](https://ui.const.team/#/component/dropdown#dropdownmenuitem-attributes)\n\n下拉菜单组件子集,需要配合下拉菜单组件使用。\n\n ----- \n\n#### ElDropdownItem Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|command|指令|string / number / object|—|—|\n|disabled|禁用|boolean|—|false|\n|divided|显示分割线|boolean|—|false|\n|icon|图标类名|string|—|—|\n\n\n ----- \n\n#### ElDropdownItem Slots\n\n|名称|说明|\n|:---|:---|\n|default|下拉列表的内容|\n" }, "el-empty": { "attributes": [ "image", "image-size", "description" ], "description": "### [ElEmpty](https://ui.const.team/#/component/empty)\n\n空状态时的占位提示。\n\n ----- \n\n#### ElEmpty Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|image|图片地址|string|—|—|\n|image-size|图片大小(宽度)|number|—|—|\n|description|文本描述|string|—|—|\n\n\n ----- \n\n#### ElEmpty Slots\n\n|名称|说明|\n|:---|:---|\n|default|自定义底部内容|\n|image|自定义图片|\n|description|自定义描述文字|\n" }, "el-form": { "attributes": [ "model", "rules", "inline", "grid", "symbol", "gutter", "label-position", "label-width", "label-max-width", "label-ellipsis", "label-suffix", "hide-required-asterisk", "show-message", "inline-message", "status-icon", "validate-on-rule-change", "size", "disabled", "scroll-to-error", "scroll-into-view-options" ], "description": "### [ElForm](https://ui.const.team/#/component/form)\n\n由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。\n\n ----- \n\n#### ElForm Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|model|表单数据对象|object|—|—|\n|rules|表单验证规则|object|—|—|\n|inline|行内表单模式|boolean|—|false|\n|grid|栅格表单模式|boolean|—|false|\n|symbol|标题名称后带有冒号|boolean|—|true|\n|gutter|栅格间隔|number|—|20|\n|label-position|表单域标签的位置,如果值为 `left` 或者 `right` 时,则需要设置 `label-width`|string|`right` / `left` / `top`|right|\n|label-width|表单域标签的宽度,例如 `50px`,作为 `Form` 直接子元素的 `FormItem` 会继承该值,支持 `auto` 宽度|string|—|—|\n|label-max-width|表单域标签的最大宽度,当 `label-width` 为 `auto` 下生效,例如 `200px`|string|—|—|\n|label-ellipsis|是否自动截断表单域文本,需要指定 `label-width`,如果为 `auto` 则不会生效|boolean|—|false|\n|label-suffix|表单域标签的后缀|string|—|—|\n|hide-required-asterisk|是否隐藏必填字段的标签旁边的红色星号|boolean|—|false|\n|show-message|是否显示校验错误信息|boolean|—|true|\n|inline-message|是否以行内形式展示校验信息|boolean|—|false|\n|status-icon|是否在输入框中显示校验结果反馈图标|boolean|—|false|\n|validate-on-rule-change|是否在 `rules` 属性改变后立即触发一次验证|boolean|—|true|\n|size|用于控制该表单内组件的尺寸,继承全局尺寸|string|`medium` / `small` / `mini`|—|\n|disabled|是否禁用该表单内的所有组件,若设置为 `true`,则表单内组件上的 `disabled` 属性不再生效|boolean|—|false|\n|scroll-to-error|当校验失败时,滚动到第一个错误表单项|boolean|—|false|\n|scroll-into-view-options|当校验有失败结果时,滚动到第一个失败的表单项目 可通过 [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) 配置|object / boolean|—|—|\n\n\n ----- \n\n#### ElForm Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|validate|任一表单项被校验后触发|被校验的表单项 prop 值,校验是否通过,错误消息(如果存在)|\n\n\n ----- \n\n#### ElForm Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|validate|对整个表单进行校验的方法,参数为一个回调函数,该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段,若不传入回调函数,则会返回一个 `promise`|function(callback: function(boolean, object))|\n|validateField|对部分表单字段进行校验的方法|function(props: array / string, callback: function(errorMessage: string))|\n|resetFields|对整个表单进行重置,将所有字段值重置为初始值并移除校验结果|—|\n|clearValidate|移除表单项的校验结果,传入待移除的表单项的 `prop` 属性或者 `prop` 组成的数组,如不传则移除整个表单的校验结果|function(props: array / string)|\n|scrollToField|滚动到指定的字段|function(prop: string)|\n\n\n ----- \n\n#### ElForm Slots\n\n|名称|说明|\n|:---|:---|\n|default|表单自定义内容,一般为 `<el-form-item>` 组件|\n", "subtags": [ "el-form-item" ] }, "el-form-item": { "attributes": [ "prop", "label", "span", "label-width", "required", "rules", "error", "show-message", "inline-message", "size" ], "description": "### [ElFormItem](https://ui.const.team/#/component/form#formitem-attributes)\n\n表单组件子集,需要配合表单组件使用。\n\n ----- \n\n#### ElFormItem Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|prop|表单域 `model` 字段,在使用 `validate`、`resetFields` 方法的情况下,该属性是必填的|string|传入 Form 组件的 `model` 中的字段|—|\n|label|标签文本|string|—|—|\n|span|栅格占据的列数|number|—|24|\n|label-width|表单域标签的宽度,例如 `50px`,支持 `auto` 宽度|string|—|—|\n|required|是否必填,如不设置,则会根据校验规则自动生成|boolean|—|false|\n|rules|表单验证规则|object|—|—|\n|error|表单域验证错误信息, 设置该值会使表单验证状态变为 `error`,并显示该错误信息|string|—|—|\n|show-message|是否显示校验错误信息|boolean|—|true|\n|inline-message|以行内形式展示校验信息|boolean|—|false|\n|size|用于控制该表单域下组件的尺寸,继承全局尺寸或者表单尺寸|string|`medium` / `small` / `mini`|—|\n\n\n ----- \n\n#### ElFormItem Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|resetField|对该表单项进行重置,将其值重置为初始值并移除校验结果|—|\n|clearValidate|移除该表单项的校验结果|—|\n\n\n ----- \n\n#### ElFormItem Slots\n\n|名称|说明|\n|:---|:---|\n|default|表单项自定义内容|\n|label|标签文本的内容|\n\n\n ----- \n\n#### ElFormItem Scoped Slot\n\n|名称|说明|\n|:---|:---|\n|error|自定义表单校验信息的显示方式,参数为 `{ error }`|\n\n\n" }, "el-image": { "attributes": [ "src", "fit", "alt", "referrer-policy", "lazy", "loading", "scroll-container", "preview-src-list", "z-index", "append-to-body", "mask-closable", "width", "height", "initial-index", "infinite", "zoom-rate", "min-scale", "max-scale" ], "description": "### [ElImage](https://ui.const.team/#/component/image)\n\n图片容器,在保留原生 `img` 的特性下,支持懒加载,自定义占位、加载失败等。\n\n ----- \n\n#### ElImage Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|src|图片源,同原生|string|—|—|\n|fit|确定图片如何适应容器框,同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)|string|`fill` / `contain` / `cover` / `none` / `scale-down`|—|\n|alt|原生 `alt`|string|—|—|\n|referrer-policy|原生 `referrerPolicy`|string|—|—|\n|lazy|是否开启懒加载|boolean|—|false|\n|loading|浏览器加载图像的策略,和浏览器原生能力一致|string|`eager` / `lazy`|—|\n|scroll-container|开启懒加载后,监听 `scroll` 事件的容器|string / HTMLElement|—|最近一个 `overflow` 值为 `auto` 或 `scroll` 的父元素|\n|preview-src-list|开启图片预览功能|array|—|—|\n|z-index|设置图片预览的 `z-index`|number|—|2000|\n|append-to-body|预览框是否插入 `body` 元素,处理 `Safari` 中 `z-index` 问题|boolean|—|false|\n|mask-closable|点击遮罩层是否可以关闭预览|boolean|—|true|\n|width|图片宽度|string|—|auto|\n|height|图片高度|string|—|auto|\n|initial-index|图片预览初始图片 `index`|number|—|—|\n|infinite|是否可以无限循环预览|boolean|—|true|\n|zoom-rate|图像查看器缩放事件的缩放速率|number|—|1.2|\n|min-scale|图像查看器缩放事件的最小缩放比例|number|—|0.2|\n|max-scale|图像查看器缩放事件的最大缩放比例|number|—|7|\n\n\n ----- \n\n#### ElImage Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|load|图片加载成功触发|(e: Event)|\n|error|图片加载失败触发|(e: Error)|\n|close|关闭图片预览触发|—|\n|change|切换图片预览触发|index|\n|zoom-change|图片预览缩放时触发|scale|\n|rotate-change|图片预览旋转时触发|deg|\n|dragend|图片拖拽后触发|(e: Event)|\n\n\n ----- \n\n#### ElImage Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|togglePreview|手动切换显示图片预览|true / false|\n\n\n ----- \n\n#### ElImage Slots\n\n|名称|说明|\n|:---|:---|\n|default|自定义内容|\n|placeholder|图片未加载的占位内容|\n|error|加载失败的内容|\n" }, "el-input-number": { "attributes": [ "value", "v-model", "default-value", "min", "max", "step", "step-strictly", "precision", "size", "disabled", "controls", "controls-position", "name", "label", "placeholder" ], "description": "### [ElInputNumber](https://ui.const.team/#/component/input-number)\n\n仅允许输入标准的数字值,可定义范围。\n\n ----- \n\n#### ElInputNumber Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|value / v-model|绑定值|number|—|0|\n|default-value|当用户清空输入框时设置的值|number / string|`number` / `undefined` / `null` / `min` / `max`|undefined|\n|min|设置计数器允许的最小值|number|—|-Infinity|\n|max|设置计数器允许的最大值|number|—|Infinity|\n|step|计数器步长|number|—|1|\n|step-strictly|是否只能输入 `step` 的倍数|boolean|—|false|\n|precision|数值精度|number|—|—|\n|size|计数器尺寸,继承全局尺寸或者表单尺寸|string|`medium` / `small` / `mini`|—|\n|disabled|是否禁用计数器|boolean|—|false|\n|controls|是否使用控制按钮|boolean|—|true|\n|controls-position|控制按钮位置|string|right|—|\n|name|原生属性|string|—|—|\n|label|输入框关联的 `label` 文字|string|—|—|\n|placeholder|输入框默认 `placeholder`|string|—|—|\n\n\n ----- \n\n#### ElInputNumber Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|change|绑定值被改变时触发|currentValue, oldValue|\n|blur|在组件 `Input` 失去焦点时触发|(event: Event)|\n|focus|在组件 `Input` 获得焦点时触发|(event: Event)|\n\n\n ----- \n\n#### ElInputNumber Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|focus|使 `Input` 获取焦点|—|\n|select|选中 `Input` 中的文字|—|\n\n\n ----- \n\n#### ElInputNumber Slots\n\n|名称|说明|\n|:---|:---|\n|prefix|输入框前缀内容|\n|suffix|输入框后缀内容|\n" }, "el-input-range": { "attributes": [ "type", "value", "v-model", "maxlength", "minlength", "start-placeholder", "end-placeholder", "separator", "prefix", "suffix", "clearable", "disabled", "size", "name", "readonly", "max", "min", "autofocus", "form", "tabindex", "validate-event" ], "description": "### [ElInputRange](https://ui.const.team/#/component/input-range)\n\n区间输入。\n\n ----- \n\n#### ElInputRange Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|type|类型|string|原生 input 的 type 值|text|\n|value / v-model|绑定值|array|—|—|\n|maxlength|原生属性,最大输入长度|number|—|—|\n|minlength|原生属性,最小输入长度|number|—|—|\n|start-placeholder|开始占位文本|string|—|—|\n|end-placeholder|结束占位文本|string|—|—|\n|separator|分隔符|string|—|'-'|\n|prefix|前缀符|string|—|—|\n|suffix|后缀符|string|—|—|\n|clearable|是否可清空|boolean|—|false|\n|disabled|禁用|boolean|—|false|\n|size|输入框尺寸,继承全局尺寸或者表单尺寸|string|`medium` / `small` / `mini`|—|\n|name|原生属性|string|—|—|\n|readonly|原生属性,是否只读|boolean|—|false|\n|max|原生属性,设置最大值|number|—|—|\n|min|原生属性,设置最小值|number|—|—|\n|autofocus|原生属性,自动获取焦点|boolean|—|false|\n|form|原生属性|string|—|—|\n|tabindex|输入框的 `tabindex`|number / string|—|—|\n|validate-event|输入时是否触发表单的校验|boolean|—|true|\n\n\n ----- \n\n#### ElInputRange Events\n\n|事件名称|说明|回调参数|\n|:---|:---|:---|\n|blur|失去焦点时触发|(event: Event)|\n|focus|获得焦点时触发|(event: Event)|\n|change|仅在输入框失去焦点或用户按下回车时触发|value|\n|clear|在点击由 `clearable` 属性生成的清空按钮时触发|清空前的值|\n\n\n ----- \n\n#### ElInputRange Methods\n\n|方法名|说明|参数|\n|:---|:---|:---|\n|focus|获取焦点|—|\n|blur|失去焦点|—|\n\n\n ----- \n\n#### ElInputRange Slots\n\n|名称|说明|\n|:---|:---|\n|prefix|前缀插槽|\n|suffix|后缀插槽|\n|separator|分隔插槽|\n" }, "el-input": { "attributes": [ "type", "value", "v-model", "maxlength", "minlength", "show-word-limit", "placeholder", "clearable", "show-password", "disabled", "size", "prefix-icon", "suffix-icon", "rows", "autosize", "autocomplete", "name", "readonly", "max", "min", "step", "resize", "autofocus", "form", "label", "tabindex", "validate-event", "formatter", "parser" ], "description": "### [ElInput](https://ui.const.team/#/component/input)\n\n通过鼠标或键盘输入字符。\n\n ----- \n\n#### ElInput Attributes\n\n|参数|说明|类型|可选值|默认值|\n|:---|:---|:---|:---|:---|\n|type|类型|string|[原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)|text|\n|value / v-model|绑定值|string / number|—|—|\n|maxlength|原生属性,最大输入长度|number|—|—|\n|minlength|原生属性,最小输入长度|number|—|—|\n|show-word-limit|是否显示输入字数统计,只在 `type='text'` 或 `type='textarea'` 时有效|boolean|—|false|\n|placeholder|输入框占位文本|string|—|—|\n|clearable|是否可清空|boolean|—|false|\n|show-password|是否显示切换密码图标|boolean|—|false|\n|disabled|禁用|boolean|—|false|\n|size|输入框尺寸,只在 `type!='textarea'` 时有效,继承全局尺寸或者表单尺寸|string|`medium` / `small` / `mini`|—|\n|prefix-icon|输入框头部图标|string|—|—|\n|suffix-icon|输入框尾部图标|string|—|—|\n|rows|输入框行数,只对 `type='textarea'` 有效|number|—|2|\n|autosize|自适应内容高度,只对 `type='textarea'` 有效,一旦开启自适应,`resize` 属性将强制为 `none`,可传入对象,如,`{ minRows: 2, maxRows: 6 }`|boolean / object|—|false|\n|autocomplete|原生属性,自动补全|string|`on` / `off`|off|\n|name|原生属性|string|—|—|\n|readonly|原生属性,是否只读|boolean|—|false|\n|max|原生属性,设置最大值|—|—|—|\n|min|原生属性,设置最小值|—|—|—|\n|step|原生属性,设置输入字段的合法数字间隔|—|—|—|\n|resize|控制是否能被用户缩放,**IE** 下无效|string|`none