### Options| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || target | Loading 须要覆盖的 DOM 节点。可传入一个 DOM 工具或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body || body | 同 `v-loading` 指令中的 `body` 润色符 | boolean | — | false || fullscreen | 同 `v-loading` 指令中的 `fullscreen` 润色符 | boolean | — | true || lock | 同 `v-loading` 指令中的 `lock` 润色符 | boolean | — | false || text | 显示在加载图标下方的加载文案 | string | — | — || spinner | 自定义加载图标类名 | string | — | — || background | 遮罩背景色 | string | — | — || customClass | Loading 的自定义类名 | string | — | — |
Message 提示### 全局方法Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采取本页面中的办法调用 `Message`。
### Options| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || message | 笔墨 | string / VNode | — | — || type | 主题 | string | success/warning/info/error | info || iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — || dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false || customClass | 自定义类名 | string | — | — || duration | 显示韶光, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 || showClose | 是否显示关闭按钮 | boolean | — | false || center | 笔墨是否居中 | boolean | — | false || onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — || offset | Message 间隔窗口顶部的偏移量 | number | — | 20 |### 方法调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果须要手动关闭实例，可以调用它的 `close` 方法。| 方法名 | 解释 || ---- | ---- || close | 关闭当前的 Message |
### 全局方法如果你完全引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采取本页面中的办法调用 `MessageBox`。调用参数为：- `$msgbox(options)`- `$alert(message, title, options)` 或 `$alert(message, options)`- `$confirm(message, title, options)` 或 `$confirm(message, options)`- `$prompt(message, title, options)` 或 `$prompt(message, options)`### 单独引用如果单独引入 `MessageBox`：```javascriptimport { MessageBox } from 'element-ui';```那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。
### Options| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || title | MessageBox 标题 | string | — | — || message | MessageBox 正文内容 | string / VNode | — | — || dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false || type | 类型，用于显示图标 | string | success / info / warning / error | — || iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — || customClass | MessageBox 的自定义类名 | string | — | — || callback | 若不该用 Promise，可以利用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — || showClose | MessageBox 是否显示右上角关闭按钮 | boolean | — | true || beforeClose | MessageBox 关闭前的回调，会停息实例的关闭 | function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例 | — | — || distinguishCancelAndClose | 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分 | boolean | — | false || lockScroll | 是否在 MessageBox 涌现时将 body 滚动锁定 | boolean | — | true || showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 办法调用时为 true） || showConfirmButton | 是否显示确定按钮 | boolean | — | true || cancelButtonText | 取消按钮的文本内容 | string | — | 取消 || confirmButtonText | 确定按钮的文本内容 | string | — | 确定 || cancelButtonClass | 取消按钮的自定义类名 | string | — | — || confirmButtonClass | 确定按钮的自定义类名 | string | — | — || closeOnClickModal | 是否可通过点击遮罩关闭 MessageBox | boolean | — | true（以 alert 办法调用时为 false） || closeOnPressEscape | 是否可通过按下 ESC 键关闭 MessageBox | boolean | — | true（以 alert 办法调用时为 false） || closeOnHashChange | 是否在 hashchange 时关闭 MessageBox | boolean | — | true || showInput | 是否显示输入框 | boolean | — | false（以 prompt 办法调用时为 true）|| inputPlaceholder | 输入框的占位符 | string | — | — || inputType | 输入框的类型 | string | — | text || inputValue | 输入框的初始文本 | string | — | — || inputPattern | 输入框的校验表达式 | regexp | — | — || inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — || inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! || center | 是否居中布局 | boolean | — | false || roundButton | 是否利用圆角按钮 | boolean | — | false |
Notification 关照### Options| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || title | 标题 | string | — | — || message | 解释笔墨 | string/Vue.VNode | — | — || dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false || type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — || iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — || customClass | 自定义类名 | string | — | — || duration | 显示韶光, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 || position | 自定义弹出位置 | string | top-right/top-left/bottom-right/bottom-left | top-right || showClose | 是否显示关闭按钮 | boolean | — | true || onClose | 关闭时的回调函数 | function | — | — || onClick | 点击 Notification 时的回调函数 | function | — | — || offset | 偏移的间隔，在同一时候，所有的 Notification 实例应该具有一个相同的偏移量 | number | — | 0 |### 方法调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果须要手动关闭实例，可以调用它的 `close` 方法。| 方法名 | 解释 || ---- | ---- || close | 关闭当前的 Notification |
五.Navigation导航NavMenu 导航菜单### Menu Attribute| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || mode | 模式 | string | horizontal / vertical | vertical || collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean | — | false || background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff || text-color | 菜单的笔墨颜色（仅支持 hex 格式） | string | — | #303133 || active-text-color | 当前激活菜单的笔墨颜色（仅支持 hex 格式） | string | — | #409EFF || default-active | 当前激活菜单的 index | string | — | — || default-openeds | 当前打开的 sub-menu 的 index 的数组 | Array | — | — || unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false || menu-trigger | 子菜单打开的触发办法(只在 mode 为 horizontal 时有效) | string | hover / click | hover || router | 是否利用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | — | false || collapse-transition | 是否开启折叠动画 | boolean | — | true |### Menu Methods| 方法名称 | 解释 | 参数 ||---------- |-------- |---------- || open | 展开指定的 sub-menu | index: 须要打开的 sub-menu 的 index || close | 收起指定的 sub-menu | index: 须要收起的 sub-menu 的 index |### Menu Events| 事宜名称 | 解释 | 回调参数 ||---------- |-------- |---------- || select | 菜单激活回调 | index: 选中菜单项的 index, indexPath: 选中菜单项的 index path || open | sub-menu 展开的回调 | index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path || close | sub-menu 收起的回调 | index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path |### SubMenu Attribute| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || index | 唯一标志 | string/null | — | null || popper-class | 弹出菜单的自定义类名 | string | — | — || show-timeout | 展开 sub-menu 的延时 | number | — | 300 || hide-timeout | 收起 sub-menu 的延时 | number | — | 300 || disabled | 是否禁用 | boolean | — | false || popper-append-to-body | 是否将弹出菜单插入至 body 元素。在菜单的定位涌现问题时，可考试测验修正该属性 | boolean | — | 一级子菜单：true / 非一级子菜单：false |### Menu-Item Attribute| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || index | 唯一标志 | string | — | — || route | Vue Router 路径工具 | Object | — | — || disabled | 是否禁用 | boolean | — | false |### Menu-Group Attribute| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || title | 分组标题 | string | — | — |
Tabs 标签页### Tabs Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || value / v-model | 绑定值，选中选项卡的 name | string | — | 第一个选项卡的 name || type | 风格类型 | string | card/border-card | — || closable | 标签是否可关闭 | boolean | — | false || addable | 标签是否可增加 | boolean | — | false || editable | 标签是否同时可增加和关闭 | boolean | — | false || tab-position | 选项卡所在位置 | string | top/right/bottom/left | top || stretch | 标签的宽度是否自撑开 | boolean | - | false || before-leave | 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻挡切换。 | Function(activeName, oldActiveName) | — | — |### Tabs Events| 事宜名称 | 解释 | 回调参数 ||---------- |-------- |---------- || tab-click | tab 当选中时触发 | 当选中的标签 tab 实例 || tab-remove | 点击 tab 移除按钮后触发 | 被删除的标签的 name || tab-add | 点击 tabs 的新增按钮后触发 | — || edit | 点击 tabs 的新增按钮或 tab 被关闭后触发 | (targetName, action) |### Tab-pane Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || label | 选项卡标题 | string | — | — || disabled | 是否禁用 | boolean | — | false || name | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' || closable | 标签是否可关闭 | boolean | — | false || lazy | 标签是否延迟渲染 | boolean | — | false |
Breadcrumb 面包屑### Breadcrumb Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || separator | 分隔符 | string | — | 斜杠'/' || separator-class | 图标分隔符 class | string | — | - |### Breadcrumb Item Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || to | 路由跳转工具，同 `vue-router` 的 `to` | string/object | — | — || replace | 在利用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false |
PageHeader 页头### Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |------------------------------ | ------ || title | 标题 | string | — | 返回 || content | 内容 | string | — | — |### Events| 事宜名称 | 解释 | 回调参数 ||---------- |-------------- |---------- || back | 点击左侧区域触发 | — |### Slots| 事宜名称 | 解释 ||---------- |------------- || title | 标题内容 || content | 内容 |
Dropdown 下拉菜单### Dropdown Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||------------- |---------------- |---------------- |---------------------- |-------- || type | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情形下有效) | string | — | — || size | 菜单尺寸，在`split-button`为 true 的情形下也对触发按钮生效 | string | medium / small / mini | — || split-button | 下拉触发元素呈现为按钮组 | boolean | — | false || placement | 菜单弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end || trigger | 触发下拉的行为 | string | hover, click | hover || hide-on-click | 是否在点击菜单项后隐蔽菜单 | boolean | — | true || show-timeout | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number | — | 250 || hide-timeout | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number | — | 150 || tabindex | Dropdown 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |### Dropdown Slots| Name | 解释 ||------|--------|| — | 触发下拉列表显示的元素。 把稳： 必须是一个元素或者或者组件 || dropdown | 下拉列表，常日是 `<el-dropdown-menu>` 组件 |### Dropdown Events| 事宜名称 | 解释 | 回调参数 ||---------- |-------- |---------- || click | `split-button` 为 true 时，点击左侧按钮的回调 | — || command | 点击菜单项触发的事宜回调 | dropdown-item 的指令 || visible-change | 下拉框涌现/隐蔽时触发 | 涌现则为 true，隐蔽则为 false |### Dropdown Menu Item Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||------------- |---------------- |---------------- |---------------------- |-------- || command | 指令 | string/number/object | — | — || disabled | 禁用 | boolean | — | false || divided | 显示分割线 | boolean | — | false || icon | 图标类名 | string | — | — |
Steps 步骤条### Steps Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | number / string | — | — || direction | 显示方向 | string | vertical/horizontal | horizontal || active | 设置当前激活步骤 | number | — | 0 || process-status | 设置当前步骤的状态 | string | wait / process / finish / error / success | process || finish-status | 设置结束步骤的状态 | string | wait / process / finish / error / success | finish || align-center | 进行居中对齐 | boolean | - | false || simple | 是否运用简洁风格 | boolean | - | false |### Step Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || title | 标题 | string | — | — || description | 描述性笔墨 | string | — | — || icon | 图标 | 传入 icon 的 class 全名来自定义 icon，也支持 slot 办法写入 | string | — || status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait / process / finish / error / success | - |### Step Slot| name | 解释 ||----|----|| icon | 自定义图标 || title | 自定义标题 || description | 自定义描述性笔墨 |
六.other其他组件Dialog 对话框:::tipDialog 的内容是Tooltip 笔墨提示
### Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||--------------------|----------------------------------------------------------|-------------------|-------------|--------|| effect | 默认供应的主题 | String | dark/light | dark || content | 显示的内容，也可以通过 `slot#content` 传入 DOM | String | — | — || placement | Tooltip 的涌现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom || value / v-model | 状态是否可见 | Boolean | — | false || disabled | Tooltip 是否可用 | Boolean | — | false || offset | 涌现位置的偏移量 | Number | — | 0 || transition | 定义渐变动画 | String | — | el-fade-in-linear || visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true || popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body', gpuAcceleration: false } || open-delay | 延迟涌现，单位毫秒 | Number | — | 0 || manual | 手动掌握模式，设置为 true 后，mouseenter 和 mouseleave 事宜将不会生效 | Boolean | — | false || popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — || enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true || hide-after | Tooltip 涌现后自动隐蔽延时，单位毫秒，为 0 则不会自动隐蔽 | number | — | 0 || tabindex | Tooltip 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
Popover 弹出框### Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||--------------------|----------------------------------------------------------|-------------------|-------------|--------|| trigger | 触发办法 | String | click/focus/hover/manual | click || title | 标题 | String | — | — || content | 显示的内容，也可以通过 `slot` 传入 DOM | String | — | — || width | 宽度 | String, Number | — | 最小宽度 150px || placement | 涌现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom || disabled | Popover 是否可用 | Boolean | — | false || value / v-model | 状态是否可见 | Boolean | — | false || offset | 涌现位置的偏移量 | Number | — | 0 || transition | 定义渐变动画 | String | — | fade-in-linear || visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true || popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` || popper-class | 为 popper 添加类名 | String | — | — || open-delay | 触发办法为 hover 时的显示延迟，单位为毫秒 | Number | — | — || close-delay | 触发办法为 hover 时的隐蔽延迟，单位为毫秒 | number | — | 200 || tabindex | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |### Slot| 参数 | 解释 ||--- | ---|| — | Popover 内嵌 HTML 文本 || reference | 触发 Popover 显示的 HTML 元素 |### Events| 事宜名称 | 解释 | 回调参数 ||---------|--------|---------|| show | 显示时触发 | — || after-enter | 显示动画播放完毕后触发 | — || hide | 隐蔽时触发 | — || after-leave | 隐蔽动画播放完毕后触发 | — |
Popconfirm 气泡确认框### Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||--------------------|----------------------------------------------------------|-------------------|-------------|--------|| title | 标题 | String | — | — || confirm-button-text | 确认按钮笔墨 | String | — | — || cancel-button-text | 取消按钮笔墨 | String | — | — || confirm-button-type | 确认按钮类型 | String | — | Primary || cancel-button-type | 取消按钮类型 | String | — | Text || icon | Icon | String | — | el-icon-question || icon-color | Icon 颜色 | String | — | #f90 || hide-icon | 是否隐蔽 Icon | Boolean | — | false |### Slot| 参数 | 解释 ||--- | ---|| reference | 触发 Popconfirm 显示的 HTML 元素 |### Events| 事宜名称 | 解释 | 回调参数 ||---------|--------|---------|| confirm | 点击确认按钮时触发 | — || cancel | 点击取消按钮时触发 | — |
Card 卡片### Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — || body-style | 设置 body 的样式| object| — | { padding: '20px' } || shadow | 设置阴影显示机遇 | string | always / hover / never | always |
Carousel 走马灯### Carousel Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || height | 走马灯的高度 | string | — | — || initial-index | 初始状态激活的幻灯片的索引，从 0 开始 | number | — | 0 || trigger | 指示器的触发办法 | string | click | — || autoplay | 是否自动切换 | boolean | — | true || interval | 自动切换的韶光间隔，单位为毫秒 | number | — | 3000 || indicator-position | 指示器的位置 | string | outside/none | — || arrow | 切换箭头的显示机遇 | string | always/hover/never | hover || type | 走马灯的类型 | string | card | — || loop | 是否循环显示 | boolean | - | true || direction | 走马灯展示的方向 | string | horizontal/vertical | horizontal |### Carousel Events| 事宜名称 | 解释 | 回调参数 ||---------|---------|---------|| change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引 |### Carousel Methods| 方法名 | 解释 | 参数 ||---------- |-------------- | -- || setActiveItem | 手动切换幻灯片 | 须要切换的幻灯片的索引，从 0 开始；或相应 `el-carousel-item` 的 `name` 属性值 || prev | 切换至上一张幻灯片 | — || next | 切换至下一张幻灯片 | — |### Carousel-Item Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || name | 幻灯片的名字，可用作 `setActiveItem` 的参数 | string | — | — || label | 该幻灯片所对应指示器的文本 | string | — | — |
Collapse 折叠面板### Collapse Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || value / v-model | 当前激活的面板(如果是手风琴模式，绑定值类型须要为`string`，否则为`array`) | string / array | — | — || accordion | 是否手风琴模式 | boolean | — | false |### Collapse Events| 事宜名称 | 解释 | 回调参数 ||---------|---------|---------|| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array / string) |### Collapse Item Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || name | 唯一标志符 | string/number | — | — || title | 面板标题 | string | — | — || disabled | 是否禁用 | boolean | — | — |
Timeline 韶光线### Timeline Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || reverse | 指定节点排序方向，默认为正序 | boolean | — | false |### Timeline-item Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || timestamp | 韶光戳 | string | - | — || hide-timestamp | 是否隐蔽韶光戳 | boolean | — | false || placement | 韶光戳位置 | string | top / bottom | bottom || type | 节点类型 | string | primary / success / warning / danger / info | - || color | 节点颜色 | string | hsl / hsv / hex / rgb | - || size | 节点尺寸 | string | normal / large | normal || icon | 节点图标 | string | — | - |### Timeline-Item Slot| name | 解释 ||------|--------|| — | Timeline-Item 的内容 || dot | 自定义节点 |
Divider 分割线### Divider Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||------------- |---------------- |---------------- |---------------------- |-------- || direction | 设置分割线方向 | string | horizontal / vertical | horizontal || content-position | 设置分割线文案的位置 | string | left / right / center | center |
Calendar 日历### Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||-----------------|-------------- |---------- |------------ |-------- || value / v-model | 绑定值 | Date/string/number | — | — || range | 韶光范围，包括开始韶光与结束韶光。开始韶光必须是周一，结束韶光必须是周日，且韶光跨度不能超过两个月。 | Array | — | — || first-day-of-week | 周起始日 | Number | 1 到 7 | 1 |### dateCell scoped slot 参数| 参数 | 解释 | 类型 | 可选值 | 默认值 ||-----------------|-------------- |---------- |------------ |-------- || date | 单元格代表的日期 | Date | — | — || data | { type, isSelected, day}，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否当选中；`day` 是格式化的日期，格式为 yyyy-MM-dd | Object | — | — |
Image 图片### Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || src | 图片源，同原生 | string | — | - || fit | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - || alt | 原生 alt | string | - | - || referrer-policy | 原生 referrerPolicy | string | - | - || lazy | 是否开启Backtop 回到顶部
### Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 || ----------------- | -------------------------------- | --------------- | ------ | ------ || target | 触发滚动的工具 | string | | || visibility-height | 滚动高度达到此参数值才涌现 | number | | 200 || right | 掌握其显示位置, 间隔页面右边距 | number | | 40 || bottom | 掌握其显示位置, 间隔页面底部间隔 | number | | 40 |### Events| 事宜名 | 解释 | 回调参数 || ------ | ------------------ | -------- || click | 点击按钮触发的事宜 | 点击事宜 |
InfiniteScroll 无限滚动### Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 || -------------- | ------------------------------ | --------- | ------------------------------------ | ------- || infinite-scroll-disabled | 是否禁用 | boolean | - |false || infinite-scroll-delay | 节流时延，单位为ms | number | - |200 || infinite-scroll-distance| 触发加载的间隔阈值，单位为px | number |- |0 || infinite-scroll-immediate | 是否立即实行加载方法，以防初始状态下内容无法撑满容器。| boolean | - |true |
Drawer 抽屉### Drawer Attributes| 参数 | 解释 | 类型 | 可选值 | 默认值 ||---------- |-------------- |---------- |-------------------------------- |-------- || append-to-body | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true | boolean | — | false || before-close | 关闭前的回调，会停息 Drawer 的关闭 | function(done)，done 用于关闭 Drawer | — | — || close-on-press-escape | 是否可以通过按下 ESC 关闭 Drawer | boolean | — | true || custom-class | Drawer 的自定义类名 | string | — | — || destroy-on-close | 掌握是否在关闭 Drawer 之后将子元素全部销毁 | boolean | - | false || modal | 是否须要遮罩层 | boolean | — | true || modal-append-to-body | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上 | boolean | — | true || direction | Drawer 打开的方向 | Direction | rtl / ltr / ttb / btt | rtl || show-close | 是否显示关闭按钮 | boolean | — | true || size | Drawer 窗体的大小, 当利用 `number` 类型时, 以像素为单位, 当利用 `string` 类型时, 请传入 'x%', 否则便会以 `number` 类型阐明 | number / string | - | '30%' || title | Drawer 的标题，也可通过具名 slot （见下表）传入 | string | — | — || visible | 是否显示 Drawer，支持 .sync 润色符 | boolean | — | false || wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | - | true || withHeader | 掌握是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | boolean | - | true |### Drawer Slot| name | 解释 ||------|--------|| — | Drawer 的内容 || title | Drawer 标题区的内容 |### Drawer Methods| name | 解释 || ---- | --- || closeDrawer | 用于关闭 Drawer, 该方法会调用传入的 `before-close` 方法 |### Drawer Events| 事宜名称 | 解释 | 回调参数 ||---------- |-------- |---------- || open | Drawer 打开的回调 | — || opened | Drawer 打开动画结束时的回调 | — || close | Drawer 关闭的回调 | — || closed | Drawer 关闭动画结束时的回调 | — |
