mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 03:07:36 +08:00
Merge pull request #110 from csvwolf/next
change all rewrited components documents to new templates
This commit is contained in:
杨奕
GitHub
commit
ad6c496d5b
@ -1,4 +1,7 @@
|
||||
## 基础用法
|
||||
## Badge 标记
|
||||
出现在按钮、图标旁的数字或状态标记
|
||||
|
||||
### 基础用法
|
||||
Badge 组件可以在右上角展示标记，最常见的用法是用于展示消息数。
|
||||
|
||||
:::demo 定义`value`属性，它接受`Number`或者`String`。
|
||||
@ -24,7 +27,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
|
||||
```
|
||||
:::
|
||||
|
||||
## 最大值
|
||||
### 最大值
|
||||
为了方便使用，Badge 组件可以自定义显示的最大值。
|
||||
|
||||
:::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。
|
||||
@ -39,7 +42,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
|
||||
```
|
||||
:::
|
||||
|
||||
## 自定义内容
|
||||
### 自定义内容
|
||||
|
||||
下面是两个样例，它们可以启发你在适时的情况使用 Badge：
|
||||
|
||||
@ -55,7 +58,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
|
||||
```
|
||||
:::
|
||||
|
||||
## 小红点
|
||||
### 小红点
|
||||
|
||||
可以使 Badge 组件显示为一个小红点，来提醒用户需要关注的内容，此时设置其他属性均无效。
|
||||
|
||||
@ -90,7 +93,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
|
||||
}
|
||||
</style>
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| value | 显示值 | string, number | | |
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
## 基础使用
|
||||
## Breadcrumb 面包屑
|
||||
显示当前页面的路径，快速返回之前的任意页面
|
||||
|
||||
### 基础使用
|
||||
|
||||
Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路径，最后一级即为当前位置。
|
||||
|
||||
@ -14,7 +17,7 @@ Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| separator | 分隔符 | string | | 斜杠'/' |
|
||||
|
||||
@ -29,7 +29,10 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础用法
|
||||
## Button 按钮
|
||||
常用的操作按钮
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。
|
||||
|
||||
@ -51,7 +54,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## Plain Button
|
||||
### Plain Button
|
||||
默认的`Default`主题，我们称之为朴素按钮(Plain Button)，你可以 hover 在样例上进行预览。
|
||||
|
||||
:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
|
||||
@ -65,7 +68,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 尺寸
|
||||
### 尺寸
|
||||
|
||||
Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
|
||||
|
||||
@ -79,7 +82,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
|
||||
```
|
||||
:::
|
||||
|
||||
## Loading
|
||||
### Loading
|
||||
|
||||
可以方便的处理 loading 状态，点击下面的按钮预览效果。
|
||||
|
||||
@ -93,7 +96,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
|
||||
```
|
||||
:::
|
||||
|
||||
## 图标按钮
|
||||
### 图标按钮
|
||||
|
||||
带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
|
||||
|
||||
@ -106,7 +109,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
|
||||
```
|
||||
:::
|
||||
|
||||
## 按钮组
|
||||
### 按钮组
|
||||
|
||||
如果你需要多个并列的按钮，按钮组可以帮你轻松的实现它。
|
||||
|
||||
@ -127,7 +130,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| size | 尺寸 | string | large,small,mini | |
|
||||
|
||||
@ -42,8 +42,10 @@
|
||||
@utils-clearfix;
|
||||
}
|
||||
</style>
|
||||
## Card 卡片
|
||||
将信息聚合在卡片容器中展示
|
||||
|
||||
## 基础用法
|
||||
### 基础用法
|
||||
|
||||
|
||||
下面是一个带有标题、内容和操作（按钮）的 Card 组件示例，需要注意的是，部分样式需要你自己填入。
|
||||
@ -62,7 +64,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 简单卡片
|
||||
### 简单卡片
|
||||
|
||||
卡片可以只有内容区域。
|
||||
|
||||
@ -76,7 +78,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 进阶使用
|
||||
### 进阶使用
|
||||
可以让你的卡片极大程度的被个性化，为更丰富的内容展示服务。
|
||||
|
||||
下例是一个带图片的示例，能帮助你更好地理解`body-style`配合分发内容自定义样式的强大：
|
||||
@ -100,7 +102,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| | |
|
||||
|
||||
@ -25,8 +25,10 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## Checkbox 多选框
|
||||
一组备选项中进行多选
|
||||
|
||||
## 基础用法
|
||||
### 基础用法
|
||||
|
||||
:::demo 在`el-checkbox`元素中定义`v-model`绑定变量，单一的`checkbox`中，默认绑定变量的值会是`Boolean`，选中为`true`。
|
||||
|
||||
@ -46,7 +48,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 多选框组
|
||||
### 多选框组
|
||||
|
||||
:::demo `checkbox-group`元素能把多个 checkbox 管理为一组，只需要在 Group 中使用`v-model`绑定`Array`类型的变量即可，`label`属性除了改变 checkbox 按钮后的介绍外，同时也是该 checkbox 对应的值，`label`与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
|
||||
|
||||
@ -76,7 +78,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 绑定 value 的多选框
|
||||
### 绑定 value 的多选框
|
||||
|
||||
:::demo 使用`true-label`和`false-label`可以自定义选中时和未选中时的值，可以为`String`或`Number`类型。
|
||||
|
||||
@ -104,7 +106,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## Checkbox Attributes
|
||||
### Checkbox Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选中状态的值（只有在`checkbox-group`下有意义） | string | | |
|
||||
@ -112,7 +114,7 @@
|
||||
| false-label | 没有选中时的值 | string, number | | |
|
||||
| disabled | 按钮禁用 | boolean | | false |
|
||||
|
||||
## Checkbox-group Events
|
||||
### Checkbox-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 当绑定值变化时触发的事件 | 选中的 Checkbox Label 值 |
|
||||
|
||||
@ -63,8 +63,10 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## Dialog 对话框
|
||||
在保留当前页面状态的情况下，告知用户并承载相关操作
|
||||
|
||||
## 基本用法
|
||||
### 基本用法
|
||||
|
||||
Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只是弹出框，可以尝试 MessageBox 组件。
|
||||
|
||||
@ -83,7 +85,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
|
||||
```
|
||||
:::
|
||||
|
||||
## 设置尺寸
|
||||
### 设置尺寸
|
||||
|
||||
:::demo 提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size`属性来设置。
|
||||
|
||||
@ -108,7 +110,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
|
||||
```
|
||||
:::
|
||||
|
||||
## 使用 Dialog 方法打开
|
||||
### 使用 Dialog 方法打开
|
||||
|
||||
:::demo 使用实例`open`和`close`方法，不用显式改变`v-modal`的值。
|
||||
|
||||
@ -137,7 +139,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
|
||||
```
|
||||
:::
|
||||
|
||||
## 自定义内容
|
||||
### 自定义内容
|
||||
|
||||
Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例，除此以外，它们并没有什么特殊之处。
|
||||
|
||||
@ -177,7 +179,7 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | Dialog 的标题 | string | | |
|
||||
@ -187,13 +189,13 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
|
||||
| closeOnClickModal | 是否可以通过点击 modal 关闭 Dialog | boolean | | true |
|
||||
| closeOnPressEscape | 是否可以通过按下 ESC 关闭 Dialog | boolean | | true |
|
||||
|
||||
## Slot
|
||||
### Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| - | Dialog 的内容 |
|
||||
| footer | Dialog 按钮操作区的内容 |
|
||||
|
||||
## 方法
|
||||
### 方法
|
||||
每个`el-dialog`实例都暴露了如下方法，用于在不显式改变`v-model`值的情况下打开 / 关闭实例：
|
||||
| 方法名 | 说明 |
|
||||
|------|--------|
|
||||
|
||||
@ -22,23 +22,15 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
## Dropdown 下拉菜单
|
||||
|
||||
## 基础用法
|
||||
将动作或菜单折叠到下拉菜单中。
|
||||
|
||||
Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可生成对应的下拉菜单，通过`text`属性来设置按钮文字。
|
||||
### 基础用法
|
||||
|
||||
默认条件下，他又一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。
|
||||
移动到下拉菜单上，展开更多操作。
|
||||
|
||||
默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item>选项四 哈哈哈哈</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
:::demo 通过`text`属性来设置按钮文字。默认条件下，他由一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
|
||||
|
||||
```html
|
||||
<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
|
||||
@ -48,19 +40,11 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
|
||||
<el-dropdown-item>选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
## 不带独立按钮的下拉菜单
|
||||
### 不带独立按钮的下拉菜单
|
||||
|
||||
如果不需要默认的主要按钮与下拉按钮的组合，可以通过设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，它接受一个`Boolean`，设置为`false`即可。
|
||||
|
||||
在下例中，可以看到，在选项三和选项四中插入了一条分割线，要达成这个效果很简单，只需要在选项四中设置`class`为`divider`。
|
||||
|
||||
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
:::demo 设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，设置为`false`即可。在选项三和选项四中插入了一条分割线，只需要在选项四中设置`class`为`divider`。
|
||||
|
||||
```html
|
||||
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
|
||||
@ -70,26 +54,11 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
## 通过点击触发下拉
|
||||
|
||||
默认通过 Hover 即可出现下拉菜单，如果有需求，可以改成 click ，只要在`trigger`属性设置为`click`即可。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-dropdown text="主要按钮" type="primary" trigger="click">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item>选项四 哈哈哈哈</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
### 通过点击触发下拉
|
||||
|
||||
:::demo 在`trigger`属性设置为`click`即可。
|
||||
```html
|
||||
<el-dropdown text="主要按钮" type="primary" trigger="click">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
@ -104,20 +73,13 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
## 按钮样式
|
||||
### 按钮样式
|
||||
|
||||
除了上述属性以外，由于本质还是按钮，`el-dropdown`同样拥有 Button 组件的相关属性：`type`和`size`，关于这点，可以参考 Button 组件的对应文档，下两例说明了相应字段的功能：
|
||||
|
||||
<div class="demo-box">
|
||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
@ -126,34 +88,9 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
|
||||
<li class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
<div class="demo-box">
|
||||
<el-dropdown text="下拉菜单" type="primary" size="large">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<li class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
<el-dropdown text="下拉菜单" type="primary">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
<el-dropdown text="下拉菜单" type="primary" size="small">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
<el-dropdown text="下拉菜单" type="primary" size="mini">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-dropdown text="下拉菜单" type="primary" size="large">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
@ -180,44 +117,9 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
## 对齐方式
|
||||
|
||||
下拉菜单的对齐方式有两种：`start`与`end`，在下例中演示了它们的区别，你可以通过设置`menu-align`来选择一种对齐方式，默认为`end`：
|
||||
|
||||
<div class="demo-box">
|
||||
<el-dropdown text="下拉菜单 end" type="primary" menu-align="end">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown text="下拉菜单 start" type="primary" menu-align="start">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-dropdown text="下拉菜单 end" type="primary" menu-align="end">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown text="下拉菜单 start" type="primary" menu-align="start">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| text | 菜单按钮文本 | string | | |
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## icon-font 图标
|
||||
## Icon 图标
|
||||
|
||||
提供了一套常用的图标集合。
|
||||
|
||||
|
||||
@ -16,8 +16,10 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## Input Number 数字输入框
|
||||
通过鼠标或键盘输入字符
|
||||
|
||||
## 基础使用
|
||||
### 基础使用
|
||||
|
||||
需要标准的数字值时可以用到 Input Number 组件，你提供了数值输入提供了范围控制和递增递减的步数控制。
|
||||
|
||||
@ -41,7 +43,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 禁用状态
|
||||
### 禁用状态
|
||||
|
||||
:::demo `disabled`属性接受一个`Boolean`，设置为`true`即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置`min`属性和`max`属性，不设置`min`和`max`时，最小值为 0。
|
||||
|
||||
@ -51,7 +53,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 步长
|
||||
### 步长
|
||||
|
||||
让组件按照步长来增减。
|
||||
|
||||
@ -62,7 +64,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 尺寸
|
||||
### 尺寸
|
||||
|
||||
和其他组件一样，Input Number 同样具有不同的尺寸。
|
||||
|
||||
@ -75,7 +77,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|----------|-------------- |----------|-------------------------------- |-------- |
|
||||
| min | 设置计数器允许的最小值 | number | | 0 |
|
||||
|
||||
@ -62,8 +62,10 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
## Loading 加载
|
||||
加载数据时显示动效
|
||||
|
||||
## 基本用法
|
||||
### 基本用法
|
||||
|
||||
:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可，默认状况下，Loading 遮罩会插入到绑定元素的子节点。
|
||||
|
||||
@ -76,7 +78,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 修饰符
|
||||
### 修饰符
|
||||
|
||||
通过修饰符，我们可以使用全屏幕 Loading 或将 Loading 设置在 body 上。
|
||||
|
||||
|
||||
@ -61,8 +61,10 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
## Message box 信息提示
|
||||
模拟系统的消息提示框而实现的一套摸态对话框组件，用于消息提示、成功提示、错误提示、询问信息
|
||||
|
||||
## 基本用法
|
||||
### 基本用法
|
||||
|
||||
MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert`等功能：`$msgbox`，`$alert`，`$confirm`以及`$prompt`。
|
||||
|
||||
@ -87,7 +89,7 @@ MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert
|
||||
```
|
||||
:::
|
||||
|
||||
## 配置项
|
||||
### 配置项
|
||||
|
||||
MessageBox 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。
|
||||
|
||||
@ -209,11 +211,11 @@ Msgbox 框是最基本的弹框，与 Alert 的区别在于 Alert 无法通过 E
|
||||
```
|
||||
:::
|
||||
|
||||
## 全局方法
|
||||
### 全局方法
|
||||
|
||||
Element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 `MessageBox`。
|
||||
|
||||
## 单独引用
|
||||
### 单独引用
|
||||
|
||||
单独引入 `MessageBox`：
|
||||
|
||||
@ -223,7 +225,7 @@ import { MessageBox } from 'element-ui';
|
||||
|
||||
对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。
|
||||
|
||||
## Options
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
|
||||
@ -1,31 +1,23 @@
|
||||
## 基础用法
|
||||
## Pagination 分页
|
||||
|
||||
Pagination 组件实现分页，只要设置`Number`类型的`total`值即可，它代表页码的个数，之后我们还可以设置`layout`，代码需要显示的内容，用逗号分隔，布局元素会依次显示。
|
||||
当数据量过多时，使用分页分解数据
|
||||
|
||||
下例中，`prev`表示上一页，`next`为上一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。
|
||||
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
### 基础用法
|
||||
|
||||
:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为上一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。
|
||||
```html
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
```
|
||||
:::
|
||||
|
||||
## 小型分页
|
||||
### 小型分页
|
||||
|
||||
在空间有限的情况下，可以使用简单的小型分页，只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。
|
||||
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
在空间有限的情况下，可以使用简单的小型分页。
|
||||
|
||||
:::demo 只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。
|
||||
```html
|
||||
<el-pagination
|
||||
small
|
||||
@ -33,26 +25,11 @@ Pagination 组件实现分页，只要设置`Number`类型的`total`值即可，
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
```
|
||||
:::
|
||||
|
||||
## 附加功能
|
||||
### 附加功能
|
||||
|
||||
此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。
|
||||
|
||||
`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示100个，200个，300个或者400个。
|
||||
|
||||
`page-size`接受一个`Number`，表示每页显示个数。
|
||||
|
||||
`current-page`接受一个`Number`，表示当前页页码。
|
||||
|
||||
<el-pagination
|
||||
@sizechange="handleSizeChange"
|
||||
@currentchange="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="sizes, prev, pager, next, jumper, total"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
:::demo 此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示100个，200个，300个或者400个。
|
||||
|
||||
```html
|
||||
<template>
|
||||
@ -79,21 +56,9 @@ Pagination 组件实现分页，只要设置`Number`类型的`total`值即可，
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| small | 是否使用小型分页样式 | Boolean | | false |
|
||||
@ -103,7 +68,7 @@ Pagination 组件实现分页，只要设置`Number`类型的`total`值即可，
|
||||
| layout | 组件布局，子组件名用逗号分隔。| String | `size`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total' |
|
||||
| page-sizes | 每页显示个数选择器的选项设置 | Number[] | | [10, 20, 30, 40, 50, 100] |
|
||||
|
||||
## Events
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| sizechange | pageSize 改变时会触发 | 每页条数`size` |
|
||||
|
||||
@ -113,48 +113,12 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础用法
|
||||
## Popover 弹出框
|
||||
|
||||
### 基础用法
|
||||
Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
|
||||
|
||||
要使用它，必须设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。
|
||||
|
||||
`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`，下面是样例，一些没有做解释的属性是与 Tooltip 一致的。
|
||||
|
||||
<div class="demo-box demo-popover">
|
||||
<el-popover
|
||||
ref="popover1"
|
||||
placement="top-start"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="这是一段容,这是一段容,这是一段容,这是一段容。">
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover2"
|
||||
placement="bottom"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="这是一段容,这是一段容,这是一段容,这是一段容。">
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover3"
|
||||
placement="right"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="这是一段容,这是一段容,这是一段容,这是一段容。">
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover1>hover 激活</el-button>
|
||||
<el-button v-popover:popover2>click 激活</el-button>
|
||||
|
||||
<el-input v-model="model" v-popover:popover3 placeholder="focus 激活"></el-input>
|
||||
</div>
|
||||
|
||||
|
||||
:::demo 必须设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`。
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover1"
|
||||
@ -187,27 +151,13 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
||||
<el-button v-popover:popover2>click 激活</el-button>
|
||||
<el-button v-popover:popover3>focus 激活</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
## 嵌套信息
|
||||
### 嵌套信息
|
||||
|
||||
和其他组件一样，Popover 组件也可以利用分发取代`content`属性，下面我们嵌套了一个表格：
|
||||
|
||||
<div class="demo-box demo-popover">
|
||||
<el-popover
|
||||
ref="popover4"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column width="150" property="date" label="日期"></el-table-column>
|
||||
<el-table-column width="100" property="name" label="姓名"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>click 激活</el-button>
|
||||
</div>
|
||||
嵌套表格的例子：
|
||||
|
||||
:::demo 利用分发取代`content`属性
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover4"
|
||||
@ -223,28 +173,13 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
||||
|
||||
<el-button v-popover:popover4>click 激活</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
## 嵌套操作
|
||||
### 嵌套操作
|
||||
|
||||
当然，你还可以嵌套操作，这相比 Dialog 更为轻量：
|
||||
|
||||
<div class="demo-box demo-popover">
|
||||
<el-popover
|
||||
ref="popover5"
|
||||
placement="top"
|
||||
width="160"
|
||||
:visible.sync="visible2">
|
||||
<p>这是一段内容这是一段内容确定删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>删除</el-button>
|
||||
</div>
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover5"
|
||||
@ -260,8 +195,9 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
||||
|
||||
<el-button v-popover:popover5>删除</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
## API
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| trigger | 触发方式 | String | 'click', 'focus', 'hover' | click |
|
||||
@ -275,7 +211,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | | true |
|
||||
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
|
||||
## Slot
|
||||
### Slot
|
||||
| 参数 | 说明 |
|
||||
|--- | ---|
|
||||
| - | Popover内嵌HTML文本 |
|
||||
|
||||
@ -6,25 +6,12 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础使用
|
||||
## Progress 进度条
|
||||
用于展示操作进度，告知用户当前状态和预期
|
||||
|
||||
Progress 组件设置`percentage`属性即可，它接受`Number`类型，表示进度条对应的百分比，**必填**，必须在 0-100。
|
||||
### 基础使用
|
||||
|
||||
`type`属性决定了进度条的样式，提供四种：`green`，`green-stripe`，`blue`，`blue-stripe`，带`stripe`的表示条纹效果，不在范围内将会报错，默认为`blue`。
|
||||
|
||||
`size`属性决定了进度条的大小，可以设置：`large`、`small`或不设置。
|
||||
|
||||
下面是样例：
|
||||
|
||||
<div class="demo-box demo-progress">
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<el-progress :percentage="50" size="large"></el-progress>
|
||||
<el-progress :percentage="50" size="small"></el-progress>
|
||||
<el-progress :percentage="50" type="green"></el-progress>
|
||||
<el-progress :percentage="50" type="blue"></el-progress>
|
||||
<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
|
||||
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
|
||||
</div>
|
||||
:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。`type`属性决定了进度条的样式，带`stripe`的表示条纹效果，不在范围内将会报错，默认为`blue`。`size`属性决定了进度条的大小。
|
||||
|
||||
```html
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
@ -35,8 +22,9 @@ Progress 组件设置`percentage`属性即可，它接受`Number`类型，表示
|
||||
<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
|
||||
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
|
||||
|
||||
@ -13,23 +13,23 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
## 基本用法
|
||||
## Radio 单选框
|
||||
|
||||
要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
|
||||
在一组备选项中进行单选
|
||||
|
||||
<div class="demo-box demo-radio">
|
||||
<el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
|
||||
</div>
|
||||
### 基本用法
|
||||
|
||||
{{radio}}
|
||||
选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
|
||||
|
||||
:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
|
||||
|
||||
{{radio}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -42,18 +42,11 @@
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## Radio Group
|
||||
### Radio Group
|
||||
|
||||
结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
|
||||
|
||||
<div class="demo-box demo-radio">
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio :label="9"></el-radio>
|
||||
<el-radio :label="6"></el-radio>
|
||||
<el-radio :label="3"></el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
:::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="radio2">
|
||||
@ -62,36 +55,13 @@
|
||||
<el-radio :label="3"></el-radio>
|
||||
</el-radio-group>
|
||||
```
|
||||
:::
|
||||
|
||||
## Radio Group Button
|
||||
### Radio Group Button
|
||||
|
||||
还有一种特殊的单选按钮组，只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
|
||||
|
||||
<div class="demo">
|
||||
<el-radio-group v-model="radio31" size="large">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<el-radio-group v-model="radio32">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<el-radio-group v-model="radio33" size="small">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
一种特殊的单选按钮组。
|
||||
|
||||
:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
|
||||
```html
|
||||
<el-radio-group v-model="radio31" size="large">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
@ -112,18 +82,15 @@
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
```
|
||||
:::
|
||||
|
||||
## 禁用
|
||||
### 禁用
|
||||
|
||||
只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
|
||||
单选框不可用的状态。
|
||||
|
||||
注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。
|
||||
|
||||
<div class="demo-box demo-radio">
|
||||
<el-radio disabled v-model="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
|
||||
</div>
|
||||
|
||||
:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio" label="禁用"></el-radio>
|
||||
@ -141,25 +108,25 @@
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
## Radio Attributes
|
||||
### Radio Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | Radio 的 value | string,number | | |
|
||||
| disabled | 是否禁用 | boolean | | false |
|
||||
|
||||
## Radio-group Attributes
|
||||
### Radio-group Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| size | Radio 按钮组尺寸 | string | large, small | |
|
||||
|
||||
## Radio-group Events
|
||||
### Radio-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
|
||||
## Radio-button Attributes
|
||||
### Radio-button Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | Radio 的 value | string,number | | |
|
||||
|
||||
@ -1,37 +1,11 @@
|
||||
## 基础步骤条
|
||||
## Steps 步骤条
|
||||
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于2步
|
||||
|
||||
Steps 组件需要设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。
|
||||
|
||||
需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。
|
||||
|
||||
设置`finish-status`属性可以改变已经完成的步骤的状态，而`process-status`可以改变当前步骤的状态，Steps组件提供了5种状态：`wait`，`process`，`finish`，`error`，`success`。
|
||||
### 基础步骤条
|
||||
|
||||
下两例分别展示了定宽的步骤条和自适应的步骤条：
|
||||
|
||||
<el-steps :space="100" :active="active" finish-status="success">
|
||||
<el-step title="步骤 1"></el-step>
|
||||
<el-step title="步骤 2"></el-step>
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-button @click.native="next">下一步</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
next() {
|
||||
if (this.active++ > 2) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
|
||||
```html
|
||||
<el-steps :space="100" :active="active" finish-status="success">
|
||||
<el-step title="步骤 1"></el-step>
|
||||
@ -57,13 +31,9 @@ Steps 组件需要设置`active`属性，接受一个`Number`，表明步骤的
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
<el-steps :active="1" process-status="error">
|
||||
<el-step title="步骤 1"></el-step>
|
||||
<el-step title="步骤 2"></el-step>
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
|
||||
:::demo Steps组件提供了5种状态：`wait`，`process`，`finish`，`error`，`success`。
|
||||
```html
|
||||
<el-steps :active="1" process-status="error">
|
||||
<el-step title="步骤 1"></el-step>
|
||||
@ -71,17 +41,13 @@ Steps 组件需要设置`active`属性，接受一个`Number`，表明步骤的
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
## 状态与描述
|
||||
### 状态与描述
|
||||
|
||||
Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每一个步骤的标题（或状态）。使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
|
||||
|
||||
<el-steps :space="100" :active="1" finish-status="success">
|
||||
<el-step title="已完成"></el-step>
|
||||
<el-step title="进行中"></el-step>
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
|
||||
|
||||
:::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
|
||||
```html
|
||||
<el-steps :space="100" :active="1" finish-status="success">
|
||||
<el-step title="已完成"></el-step>
|
||||
@ -89,15 +55,11 @@ Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
除了`title`外，还可以用`description`属性来补充说明，下面是一个使用了`description`的例子：
|
||||
|
||||
<el-steps :space="200" :active="1">
|
||||
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
<el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
</el-steps>
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-steps :space="200" :active="1">
|
||||
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
@ -105,17 +67,11 @@ Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每
|
||||
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
## 带图标的步骤条
|
||||
|
||||
除了`title`和`description`，还可以通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
|
||||
|
||||
<el-steps :space="100" :active="1">
|
||||
<el-step title="步骤 1" icon="edit"></el-step>
|
||||
<el-step title="步骤 2" icon="upload"></el-step>
|
||||
<el-step title="步骤 3" icon="picture"></el-step>
|
||||
</el-steps>
|
||||
### 带图标的步骤条
|
||||
|
||||
:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
|
||||
```html
|
||||
<el-steps :space="100" :active="1">
|
||||
<el-step title="步骤 1" icon="edit"></el-step>
|
||||
@ -123,17 +79,13 @@ Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每
|
||||
<el-step title="步骤 3" icon="picture"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
## 竖式步骤条
|
||||
### 竖式步骤条
|
||||
|
||||
默认情况下，步骤条为横向显示，如果需要竖向显示的步骤条，只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
|
||||
|
||||
<el-steps :space="100" direction="vertical" :active="1">
|
||||
<el-step title="步骤 1"></el-step>
|
||||
<el-step title="步骤 2"></el-step>
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
默认情况下，步骤条为横向显示，也可以显示竖向显示的步骤条。
|
||||
|
||||
:::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
|
||||
```html
|
||||
<el-steps :space="100" direction="vertical" :active="1">
|
||||
<el-step title="步骤 1"></el-step>
|
||||
@ -141,8 +93,7 @@ Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
|
||||
## API
|
||||
:::
|
||||
|
||||
### Steps Attributes
|
||||
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@ -291,7 +291,7 @@
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
property="address"
|
||||
label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -334,7 +334,7 @@
|
||||
:::demo 只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
height="250"
|
||||
border
|
||||
@ -769,4 +769,3 @@
|
||||
| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | - | - |
|
||||
| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | - | false |
|
||||
| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，通过 _self 获取当前上下文。此时不需要配置 property 属性 | - | - |
|
||||
|
||||
|
||||
@ -34,8 +34,10 @@
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
## Tabs 标签页
|
||||
分隔内容上有关联但属于不同类别的数据集合
|
||||
|
||||
## 基础使用
|
||||
### 基础使用
|
||||
|
||||
:::demo Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。例子选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。
|
||||
|
||||
@ -60,7 +62,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 多种风格
|
||||
### 多种风格
|
||||
|
||||
除了上例中的风格外，我们还提供了标签和卡片两种风格。
|
||||
|
||||
@ -82,7 +84,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## 可关闭的标签
|
||||
### 可关闭的标签
|
||||
|
||||
:::demo 在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
|
||||
|
||||
@ -110,20 +112,20 @@
|
||||
```
|
||||
:::
|
||||
|
||||
## Tabs Attributes
|
||||
### Tabs Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| type | 风格类型 | string | card, border-card | |
|
||||
| closable | 标签是否可关闭 | boolean | true, false | false |
|
||||
| active-name | 选中选项卡的 name | string | | |
|
||||
|
||||
## Tabs Events
|
||||
### Tabs Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| tab-click | tab 被选中的钩子 | 被选中的标签 tab |
|
||||
| tab-remove | tab 被删除的钩子 | 被删除的标签 tab |
|
||||
|
||||
## Tab-pane Attributes
|
||||
### Tab-pane Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选项卡标题 | string | | |
|
||||
|
||||
@ -28,7 +28,10 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础使用
|
||||
## Tag 标签
|
||||
用于标记和选择
|
||||
|
||||
### 基础使用
|
||||
|
||||
Tag 组件提供了六种主题。
|
||||
|
||||
@ -44,7 +47,7 @@ Tag 组件提供了六种主题。
|
||||
```
|
||||
:::
|
||||
|
||||
## 描边
|
||||
### 描边
|
||||
|
||||
借此可以定义 hover 时的效果。
|
||||
|
||||
@ -54,7 +57,7 @@ Tag 组件提供了六种主题。
|
||||
```
|
||||
:::
|
||||
|
||||
## 可移除的标签
|
||||
### 可移除的标签
|
||||
|
||||
:::demo 设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。设置`close`事件可以处理关闭后的回调函数。
|
||||
|
||||
@ -94,7 +97,7 @@ Tag 组件提供了六种主题。
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | 主题 | string | 'primary', 'gray', 'success', 'warning', 'error' | |
|
||||
@ -103,7 +106,7 @@ Tag 组件提供了六种主题。
|
||||
| hit | 是否有边框描边 | boolean | | false |
|
||||
|
||||
|
||||
## Events
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| close | 关闭tag时触发的事件 | |
|
||||
|
||||
@ -7,24 +7,17 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
## 基础用法
|
||||
## Tooltips 文字提示
|
||||
|
||||
### 基础用法
|
||||
|
||||
Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们提供9种不同的展示方式。
|
||||
|
||||
使用`content`属性来决定`hover`时的提示信息。
|
||||
下面是完整的九个示例，可以通过该示例来理解，选择你要的效果：
|
||||
|
||||
由`placement`属性决定展示效果：
|
||||
|
||||
`placement`属性值为：`方向-箭头方位`
|
||||
|
||||
四个方向：`top`、`left`、`right`、`bottom`
|
||||
|
||||
三种箭头方位：`start`, `end`，默认为空
|
||||
|
||||
如`top center`即`placement="top"`，`left top`即`placement="left-end"`。
|
||||
|
||||
下面是完整的九个示例，可以通过该示例来理解上面的说明，选择你要的效果：
|
||||
:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-箭头方位`；四个方向：`top`、`left`、`right`、`bottom`；三种箭头方位：`start`, `end`，默认为空。如`top center`即`placement="top"`，`left top`即`placement="left-end"`。
|
||||
|
||||
```html
|
||||
<style>
|
||||
.box {
|
||||
width: 400px;
|
||||
@ -101,24 +94,15 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
## 主题
|
||||
### 主题
|
||||
|
||||
Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过设置`effect`属性来改变主题，默认为`dark`。
|
||||
|
||||
<div>
|
||||
<el-tooltip content="Top center" placement="top">
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
Tooltip 组件提供了两个不同的主题：`dark`和`light`。
|
||||
|
||||
|
||||
<div>
|
||||
<el-tooltip content="Bottom center" placement="bottom" effect="light">
|
||||
<el-button>Bottom center</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
:::demo 通过设置`effect`属性来改变主题，默认为`dark`。
|
||||
```html
|
||||
<el-tooltip content="Top center" placement="top">
|
||||
<el-button>Dark</el-button>
|
||||
@ -127,26 +111,22 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
|
||||
<el-button>Light</el-button>
|
||||
</el-tooltip>
|
||||
```
|
||||
:::
|
||||
|
||||
## 更多Content
|
||||
### 更多Content
|
||||
|
||||
如果需要展示多行文本或者是设置文本内容的格式，我们可以考虑用具名 slot 分发`content`，替代`tooltip`中的`content`属性：
|
||||
|
||||
<div>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">多行信息<br/>第二行信息</div>
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
展示多行文本或者是设置文本内容的格式
|
||||
|
||||
:::demo 用具名 slot 分发`content`，替代`tooltip`中的`content`属性。
|
||||
```html
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">多行信息<br/>第二行信息</div>
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
```
|
||||
:::
|
||||
|
||||
## 高级扩展
|
||||
### 高级扩展
|
||||
|
||||
除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：
|
||||
|
||||
@ -158,25 +138,7 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
|
||||
|
||||
当然，Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
|
||||
|
||||
<style>
|
||||
.slide-fade-enter-active {
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
}
|
||||
.slide-fade-enter, .expand-fade-leave-active {
|
||||
margin-left: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" transition="slide-fade" placement="bottom" effect="light">
|
||||
<el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" transition="slide-fade" placement="bottom" effect="light">
|
||||
@ -197,8 +159,9 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| effect | 默认提供的主题 | String | `dark`, `light` | dark |
|
||||
@ -211,4 +174,3 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
|
||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | | true |
|
||||
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| openDelay | 延迟出现，单位毫秒 | Number | | 0 |
|
||||
|
||||
|
||||
@ -373,11 +373,14 @@
|
||||
this.$calcHeight(value);
|
||||
},
|
||||
|
||||
data(val) {
|
||||
if (val && this.selectionMode === 'multiple') {
|
||||
this.tableData = val.map(item => objectAssign({ '$selected': false }, item));
|
||||
} else {
|
||||
this.tableData = val;
|
||||
data: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val && this.selectionMode === 'multiple') {
|
||||
this.tableData = val.map(item => objectAssign({ '$selected': false }, item));
|
||||
} else {
|
||||
this.tableData = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user