Skip to content

E
Element
Commit 9919ef5c authored by SkyAo's avatar SkyAo
Browse files
Options

change all rewrited components documents to new templates

parent d2ae165f
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 509 deletions
examples/docs/badge.md
View file @ 9919ef5c
## 基础用法
## 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 | | |
......
examples/docs/breadcrumb.md
View file @ 9919ef5c
## 基础使用
## Breadcrumb 面包屑
显示当前页面的路径，快速返回之前的任意页面
### 基础使用
Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路径，最后一级即为当前位置。
......@@ -14,7 +17,7 @@ Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路
```
:::
## Attributes
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | 分隔符 | string | | 斜杠'/' |
examples/docs/button.md
View file @ 9919ef5c
......@@ -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 | |
......
examples/docs/card.md
View file @ 9919ef5c
......@@ -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| | |
......
examples/docs/checkbox.md
View file @ 9919ef5c
......@@ -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 值 |
examples/docs/dialog.md
View file @ 9919ef5c
......@@ -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`值的情况下打开 / 关闭实例：
| 方法名 | 说明 |
|------|--------|
......
examples/docs/dropdown.md
View file @ 9919ef5c
......@@ -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 | | |
......
examples/docs/icon.md
View file @ 9919ef5c
......@@ -48,7 +48,7 @@
}
}
</style>
## icon-font 图标
## Icon 图标
提供了一套常用的图标集合。
......
examples/docs/input-number.md
View file @ 9919ef5c
......@@ -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 |
......
examples/docs/loading.md
View file @ 9919ef5c
......@@ -62,8 +62,10 @@
}
}
</script>
## Loading 加载
加载数据时显示动效
## 基本用法
### 基本用法
:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可，默认状况下，Loading 遮罩会插入到绑定元素的子节点。
......@@ -76,7 +78,7 @@
```
:::
## 修饰符
### 修饰符
通过修饰符，我们可以使用全屏幕 Loading 或将 Loading 设置在 body 上。
......
examples/docs/message-box.md
View file @ 9919ef5c
......@@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
......
examples/docs/pagination.md
View file @ 9919ef5c
## 基础用法
## 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` |
......
examples/docs/popover.md
View file @ 9919ef5c
......@@ -113,48 +113,12 @@
}
</style>
## 基础用法
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>
## Popover 弹出框
### 基础用法
Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
:::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文本 |
examples/docs/progress.md
View file @ 9919ef5c
......@@ -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 |
......
examples/docs/radio.md
View file @ 9919ef5c
......@@ -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
结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
### Radio Group
<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
还有一种特殊的单选按钮组，只需要把`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>
### Radio Group Button
一种特殊的单选按钮组。
:::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 | | |
......
examples/docs/steps.md
View file @ 9919ef5c
## 基础步骤条
## 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
......
examples/docs/table.md
View file @ 9919ef5c
......@@ -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 属性 | - | - |
examples/docs/tabs.md
View file @ 9919ef5c
......@@ -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 | | |
......
examples/docs/tag.md
View file @ 9919ef5c
......@@ -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时触发的事件 | |
examples/docs/tooltip.md
View file @ 9919ef5c
......@@ -7,24 +7,17 @@
}
};
</script>
## 基础用法
## Tooltips 文字提示
Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们提供9种不同的展示方式。
使用`content`属性来决定`hover`时的提示信息。
由`placement`属性决定展示效果：
`placement`属性值为：`方向-箭头方位`
四个方向：`top`、`left`、`right`、`bottom`
### 基础用法
三种箭头方位：`start`, `end`，默认为空
Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们提供9种不同的展示方式。
如`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 |
packages/table/src/table.vue
View file @ 9919ef5c
......@@ -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;
}
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment