Ver código fonte

update message box prompt style

Leopoldthecoder 9 anos atrás
pai
commit
07a0943d6b

+ 3 - 3
examples/docs/badge.md

@@ -96,6 +96,6 @@ Badge 组件可以在右上角展示标记,最常见的用法是用于展示
 ### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| value          | 显示值      | string, number          |                       |         |
-| max          |  最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型    | number  |                       |         |
-| is-dot       | 小圆点    | boolean  |    |  false |
+| value          | 显示值      | string, number          |                       |         |
+| max          |  最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型    | number  |                       |         |
+| is-dot       | 小圆点    | boolean  |    |  false |

+ 1 - 1
examples/docs/breadcrumb.md

@@ -20,4 +20,4 @@ Breadcrumb,面包屑导航,用于提供给用户一个回溯到首页的路
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| separator | 分隔符 | string | | 斜杠'/' |
+| separator | 分隔符 | string | | 斜杠'/' |

+ 3 - 3
examples/docs/button.md

@@ -133,9 +133,9 @@ Button 组件提供除了默认值以外的三种尺寸,可以在不同场景
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | 尺寸   | string  |   large,small,mini            |         |
-| type     | 类型   | string    |   primary,success,warning,danger,info,text |         |
+| size     | 尺寸   | string  |   large,small,mini            |         |
+| type     | 类型   | string    |   primary,success,warning,danger,info,text |         |
 | plain     | 是否朴素按钮   | Boolean    | true,false | false   |
 | disabled  | 禁用    | boolean   | true, false   | false   |
-| icon  | 图标,已有的图标库中的图标名 | string   |    |    |
+| icon  | 图标,已有的图标库中的图标名 | string   |    |    |
 | native-type | 原生 type 属性 | string | button,submit,reset | button |

+ 2 - 2
examples/docs/card.md

@@ -105,5 +105,5 @@
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| header | 设置 header,也可以通过 `slot#header` 传入 DOM | string| | |
-| body-style | 设置 body 的样式| object| | { padding: '20px' } |
+| header | 设置 header,也可以通过 `slot#header` 传入 DOM | string| | |
+| body-style | 设置 body 的样式| object| | { padding: '20px' } |

+ 4 - 4
examples/docs/checkbox.md

@@ -109,10 +109,10 @@
 ### Checkbox Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | 选中状态的值(只有在`checkbox-group`下有意义)   | string    |               |         |
-| true-label | 选中时的值   | string, number    |               |         |
-| false-label | 没有选中时的值   | string, number    |               |         |
-| disabled  | 按钮禁用    | boolean   |    | false   |
+| label     | 选中状态的值(只有在`checkbox-group`下有意义)   | string    |               |         |
+| true-label | 选中时的值   | string, number    |               |         |
+| false-label | 没有选中时的值   | string, number    |               |         |
+| disabled  | 按钮禁用    | boolean   |   | false   |
 
 ### Checkbox-group Events
 | 事件名称      | 说明    | 回调参数      |

+ 5 - 5
examples/docs/date-picker.md

@@ -252,14 +252,14 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | 只读 | boolean | - | false |
-| placeholder | 占位内容 | string | - | - |
+| readonly | 只读 | boolean |  | false |
+| placeholder | 占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/datetime/week | date |
 | format | 时间日期格式化 | string | 年 `yyyy`,月 `MM`,日 `dd`,<br>小时 `HH`,分 `mm`,秒 `ss` | yyyy-MM-dd |
-| shortcuts | 快捷选项列表,配置信息<br>查看下表 | object[] | - | - |
+| shortcuts | 快捷选项列表,配置信息<br>查看下表 | object[] | — | — |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| text | 标题文本 | string | - | - |
-| onClick | 选中后的回调函数,参数是 vm,可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | | |
+| text | 标题文本 | string | — | — |
+| onClick | 选中后的回调函数,参数是 vm,可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | | |

+ 5 - 5
examples/docs/datetime-picker.md

@@ -223,16 +223,16 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | 只读 | boolean | - | false |
-| placeholder | 占位内容 | string | - | - |
+| readonly | 只读 | boolean |  | false |
+| placeholder | 占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/datetime/week | date |
 | format | 时间日期格式化 | string | 年 `yyyy`,月 `MM`,日 `dd`,<br>小时 `HH`,分 `mm`,秒 `ss` | yyyy-MM-dd |
-| shortcuts | 快捷选项列表,配置信息<br>查看下表 | object[] | - | - |
+| shortcuts | 快捷选项列表,配置信息<br>查看下表 | object[] | — | — |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| text | 标题文本 | string | - | - |
-| onClick | 选中后的回调函数,参数是 vm,可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | | |
+| text | 标题文本 | string | — | — |
+| onClick | 选中后的回调函数,参数是 vm,可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | | |
 
 

+ 6 - 6
examples/docs/dialog.md

@@ -182,17 +182,17 @@ Dialog 组件的正文标题可以是任意的,甚至可以是表格或表单
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| title     | Dialog 的标题 | string    |  -                               |  -      |
+| title     | Dialog 的标题 | string    | —                               | —      |
 | size      | Dialog 的大小 | string    | tiny/small/large/full | small |
-| modal     | 是否需要遮罩层   | boolean   | - | true |
-| custom-class      | Dialog 的自定义类名 | string    | - | - |
-| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean    | - | true |
-| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean    | - | true |
+| modal     | 是否需要遮罩层   | boolean   |  | true |
+| custom-class      | Dialog 的自定义类名 | string    | — | — |
+| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean    |  | true |
+| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean    |  | true |
 
 ### Slot
 | name | 说明 |
 |------|--------|
-| - | Dialog 的内容 |
+|  | Dialog 的内容 |
 | footer | Dialog 按钮操作区的内容 |
 
 ### 方法

+ 4 - 4
examples/docs/dropdown.md

@@ -122,9 +122,9 @@
 ### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| text          | 菜单按钮文本      | string          |                       |         |
-| type          | 菜单按钮类型,同 Button 组件   | string  |                       |         |
+| text          | 菜单按钮文本      | string          |                       |         |
+| type          | 菜单按钮类型,同 Button 组件   | string  |                       |         |
 | trigger       | 触发下拉菜单的方式    | string  |    hover,click  |  hover |
-| icon-separate | 独立的下拉菜单按钮 | boolean         |            | false   |
-| size          | 菜单按钮尺寸,同 Button 组件     | string          | large, small, mini  |     |
+| icon-separate | 独立的下拉菜单按钮 | boolean         |            | false   |
+| size          | 菜单按钮尺寸,同 Button 组件     | string          | large, small, mini  |    |
 | menu-align    | 菜单水平对齐方向     | string          | start, end  | end |

+ 4 - 4
examples/docs/layout.md

@@ -163,7 +163,7 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | gutter | 栅格间隔 | number | — | 0 |
-| type | 布局模式,可选 flex,现代浏览器下有效 | string | - | - |
+| type | 布局模式,可选 flex,现代浏览器下有效 | string | — | — |
 | justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
 | align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
 
@@ -171,6 +171,6 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | **span** | 栅格占据的列数,**必选参数** | number | — | — |
-| offset | 栅格左侧的间隔格数 | number | - | 0 |
-| push |  栅格向右移动格数 | number | - | 0 |
-| pull |  栅格向左移动格数 | number | - | 0 |
+| offset | 栅格左侧的间隔格数 | number |  | 0 |
+| push |  栅格向右移动格数 | number |  | 0 |
+| pull |  栅格向左移动格数 | number |  | 0 |

+ 49 - 75
examples/docs/message-box.md

@@ -2,42 +2,38 @@
   export default {
     methods: {
       open() {
-        this.$alert('这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', '消息');
-      },
-
-      open2() {
         this.$alert('操作失败, 请稍后重试', '提示', {
           type: 'error'
         });
       },
 
-      open3() {
+      open2() {
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           type: 'warning'
         }).then(() => {
-          this.$notify({
+          this.$message({
             message: '删除成功!',
             type: 'success'
           });
         }).catch(() => {
-          this.$notify({
+          this.$message({
             message: '已取消删除',
             type: 'info'
           });          
         });
       },
 
-      open4() {
+      open3() {
         this.$prompt('请输入邮箱', '提示', {
           inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
           inputErrorMessage: '邮箱格式不正确'
         }).then(({ value }) => {
-          this.$notify({
+          this.$message({
             type: 'success',
             message: '你的邮箱是: ' + value
           });
         }).catch(() => {
-          this.$notify({
+          this.$message({
             type: 'info',
             message: '取消输入'
           });       
@@ -45,13 +41,13 @@
       },
 
 
-      open5() {
+      open4() {
         this.$msgbox({
           title: '消息',
           message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
           showCancelButton: true
         }).then(action => {
-          this.$notify({
+          this.$message({
             type: 'info',
             message: 'action: ' + action
           });
@@ -64,24 +60,21 @@
 ## Message box 信息提示
 模拟系统的消息提示框而实现的一套摸态对话框组件,用于消息提示、成功提示、错误提示、询问信息
 
-### 基础用法
-
-MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert`等功能:`$msgbox`,`$alert`,`$confirm`以及`$prompt`。
-
-在本页文档中一一介绍它们,首先看最简单的示例,我们使用`$alert`。
+### 消息提示
 
-:::demo 它接收了两个参数,`message`和`title`。值得一提的是,窗口被关闭后,它会返回一个`Promise`对象便于进行后续操作的处理。
+当用户进行操作时会被触发,该对话框中断用户操作,直到用户确认知晓后才可关闭
 
+:::demo 调用`$alert`方法即可打开消息提示,它模拟了系统的 `alert`,无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数,`message`和`title`。值得一提的是,窗口被关闭后,它会返回一个`Promise`对象便于进行后续操作的处理。
 ```html
 <template>
-  <el-button type="text" @click.native="open">打开 Alert</el-button>
+  <el-button type="text" @click.native="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
       open() {
-        this.$alert('这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', '消息');
+        this.$alert('操作失败, 请稍后重试', '提示');
       }
     }
   }
@@ -89,87 +82,66 @@ MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert
 ```
 :::
 
-### 配置项
+### 确认消息
 
-MessageBox 组件也拥有极高的定制性,我们可以传入`options`作为第三个参数,它是一个字面量对象。
+提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框
 
-:::demo 第二个参数`title`必须定义为`String`类型,如果是`Object`,会被理解为`options`。`type`字段表明消息类型,可以为`success`,`error`,`info`和`warning`,无效的设置将会被忽略。
+:::demo 调用`$confirm`方法即可打开消息提示,它模拟了系统的 `confirm`。Message Box 组件也拥有极高的定制性,我们可以传入`options`作为第三个参数,它是一个字面量对象。`type`字段表明消息类型,可以为`success`,`error`,`info`和`warning`,无效的设置将会被忽略。注意,第二个参数`title`必须定义为`String`类型,如果是`Object`,会被理解为`options`。在这里我们用了 Promise 来处理后续响应。
 
 ```html
 <template>
-  <el-button type="text" @click.native="open2">打开 alert</el-button>
+  <el-button type="text" @click.native="open2">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
       open2() {
-        this.$alert('操作失败, 请稍后重试', '提示', {
-          type: 'error'
-        });
-      },
-    }
-  }
-</script>
-```
-:::
-
-下面是一个 confirm 框。
-
-:::demo 在这里我们用了`Promise`来处理后续响应。
-
-```html
-<template>
-  <el-button type="text" @click.native="open3">打开 confirm</el-button>
-</template>
-
-<script>
-  export default {
-    methods: {
-      open3() {
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           type: 'warning'
         }).then(() => {
-          this.$notify({
+          this.$message({
             type: 'success',
             message: '删除成功!'
           });
         }).catch(() => {
-          this.$notify({
+          this.$message({
             type: 'info',
             message: '已取消删除'
           });          
         });
-      },
+      }
     }
   }
 </script>
 ```
 :::
 
-Prompt 框功能强大,可以处理简单的输入。
+### 提交内容
+
+当用户进行操作时会被触发,中断用户操作,提示用户进行输入的对话框
 
-:::demo 可以用`inputPattern`字段自己规定匹配模式,或者用`inputValidator`规定校验函数,可以返回`Boolean`或`String`,`Boolean`为`false`或字符串时均表示校验为通过,`String`相当于定义了`inputErrorMessage`字段。此外,可以用`inputPlaceholder`字段来定义输入框的占位符。
+:::demo 调用`$prompt`方法即可打开消息提示,它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式,或者用`inputValidator`规定校验函数,可以返回`Boolean`或`String`,`Boolean`为`false`或字符串时均表示校验通过,`String`相当于定义了`inputErrorMessage`字段。此外,可以用`inputPlaceholder`字段来定义输入框的占位符。
 
 ```html
 <template>
-  <el-button type="text" @click.native="open4">打开 prompt</el-button>
+  <el-button type="text" @click.native="open3">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open4() {
+      open3() {
         this.$prompt('请输入邮箱', '提示', {
           inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
           inputErrorMessage: '邮箱格式不正确'
         }).then(value => {
-          this.$notify({
+          this.$message({
             type: 'success',
             message: '你的邮箱是: ' + value
           });
         }).catch(() => {
-          this.$notify({
+          this.$message({
             type: 'info',
             message: '取消输入'
           });       
@@ -181,25 +153,27 @@ Prompt 框功能强大,可以处理简单的输入。
 ```
 :::
 
-Msgbox 框是最基本的弹框,与 Alert 的区别在于 Alert 无法通过 ESC 和 点击框外关闭。
+### 自定义
 
-:::demo 使用了`showCancelButton`字段,用于显示取消按钮,同时使用`cancelButtonClass`可以自定义样式,`cancelButtonText`来自定义按钮文本,Confirm 按钮也具有相同的字段,在文末的字段说明中有完整的字段列表。
+可自定义配置不同内容
+
+:::demo 以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法,使用了`showCancelButton`字段,用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式,使用`cancelButtonText`来自定义按钮文本。Confirm 按钮也具有相同的字段,在文末的字段说明中有完整的字段列表。
 
 ```html
 <template>
-  <el-button type="text" @click.native="open5">打开 Message Box</el-button>
+  <el-button type="text" @click.native="open4">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open4() {
         this.$msgbox({
           title: '消息',
           message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
           showCancelButton: true
         }).then(action => {
-          this.$notify({
+          this.$message({
             type: 'info',
             message: 'action: ' + action
           });
@@ -229,17 +203,17 @@ import { MessageBox } from 'element-ui';
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| title | MessageBox标题 | string | - | - |
-| message | MessageBox消息正文内容 | string | - | - |
-| type | 消息类型,用于显示图标 | string | success/info/<br>warning/error | - |
-| show-cancel-button | 是否显示取消按钮 | boolean | - | false(以 confirm 和 prompt 方式调用时为 true) |
-| show-confirm-button | 是否显示确定按钮 | boolean | - | true |
-| cancel-button-text | 取消按钮的文本内容 | string | - | 取消 |
-| confirm-button-text | 确定按钮的文本内容 | string | - | 确定 |
-| cancel-button-class | 取消按钮的自定义类名 | string | - | - |
-| confirm-button-class | 确定按钮的自定义类名 | string | - | - |
-| show-input | 是否显示输入框 | boolean | - | false(以 prompt 方式调用时为 true)|
-| input-placeholder | 输入框的占位符 | string | - | - |
-| input-pattern | 输入框的校验表达式 | regexp | - | - |
-| input-validator | 输入框的校验函数。可以返回布尔值或字符串,若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | - | - |
-| input-error-message | 校验未通过时的提示文本 | string | - | 输入的数据不合法! |
+| title | MessageBox标题 | string | — | — |
+| message | MessageBox消息正文内容 | string | — | — |
+| type | 消息类型,用于显示图标 | string | success/info/<br>warning/error |  |
+| showCancelButton | 是否显示取消按钮 | boolean | — | false(以 confirm 和 prompt 方式调用时为 true) |
+| showConfirmButton | 是否显示确定按钮 | boolean | — | true |
+| cancelButtonText | 取消按钮的文本内容 | string | — | 取消 |
+| confirmButtonText | 确定按钮的文本内容 | string | — | 确定 |
+| cancelButtonClass | 取消按钮的自定义类名 | string | — | — |
+| confirmButtonClass | 确定按钮的自定义类名 | string | — | — |
+| showInput | 是否显示输入框 | boolean | — | false(以 prompt 方式调用时为 true)|
+| inputPlaceholder | 输入框的占位符 | string | — | — |
+| inputPattern | 输入框的校验表达式 | regexp | — | — |
+| inputValidator | 输入框的校验函数。可以返回布尔值或字符串,若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — |
+| inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |

+ 4 - 4
examples/docs/message.md

@@ -203,8 +203,8 @@ import { Message } from 'element-ui';
 ## Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| message | 消息文字 | string | - | - |
+| message | 消息文字 | string | — | — |
 | type | 主题 | string | success/warning/info/error | info |
-| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | - | 3000 |
-| showClose | 是否显示关闭按钮 | boolean | - | false |
-| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | - | - |
+| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number |  | 3000 |
+| showClose | 是否显示关闭按钮 | boolean |  | false |
+| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |

+ 5 - 5
examples/docs/notification.md

@@ -195,8 +195,8 @@ import { Notification } from 'element-ui';
 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| title | 标题 | string | - | - |
-| message | 说明文字 | string | - | - |
-| type | 主题样式,如果不在可选值内将被忽略 | string | success/warning/info/error | - |
-| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | - | 4500 |
-| onClose | 关闭时的回调函数 | function | - | - |
+| title | 标题 | string | — | — |
+| message | 说明文字 | string | — | — |
+| type | 主题样式,如果不在可选值内将被忽略 | string | success/warning/info/error |  |
+| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number |  | 4500 |
+| onClose | 关闭时的回调函数 | function | — | — |

+ 5 - 5
examples/docs/pagination.md

@@ -74,12 +74,12 @@
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| small              |   是否使用小型分页样式     | Boolean |             | false |
-| page-size              | 每页显示条目个数                                                   | Number |             | 10 |
-| total | 总条目数 | Number | | 0 |
-| current-page | 当前页数 | Number | | 0|
+| small              |   是否使用小型分页样式     | Boolean |             | false |
+| page-size              | 每页显示条目个数                                                   | Number |             | 10 |
+| total | 总条目数 | Number | | 0 |
+| current-page | 当前页数 | Number | | 0|
 | layout | 组件布局,子组件名用逗号分隔。| String | `size`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
-| page-sizes | 每页显示个数选择器的选项设置 | Number[] | |  [10, 20, 30, 40, 50, 100] |
+| page-sizes | 每页显示个数选择器的选项设置 | Number[] | |  [10, 20, 30, 40, 50, 100] |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |

+ 8 - 8
examples/docs/popover.md

@@ -201,17 +201,17 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 | trigger | 触发方式 | String  | 'click', 'focus', 'hover' |    click    |
-|  title              | 标题 | String |  |   |
-|  content        |  显示的内容,也可以通过 `slot#` 传入 DOM   | String            |  |  |
-|  width        |  宽度  | String, Number            |  | 最小宽度 150px |
+|  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 |
-|  visible        |  初始状态是否可见  | Boolean           |  |  false |
-|  offset        |  出现位置的偏移量  | Number           |  |  0 |
-|  transition     |  定义渐变动画      | String             |  | `fade-in-linear` |
-|  visible-arrow   |  是否显示 Tooltip 箭头,更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean |  | true |
+|  visible        |  初始状态是否可见  | Boolean           |  |  false |
+|  offset        |  出现位置的偏移量  | Number           |  |  0 |
+|  transition     |  定义渐变动画      | String             |  | `fade-in-linear` |
+|  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
 | 参数               | 说明                                                     |
 |--- | ---|
-| - | Popover内嵌HTML文本 |
+|  | Popover内嵌HTML文本 |

+ 1 - 1
examples/docs/progress.md

@@ -29,4 +29,4 @@
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | **percentage** | **百分比(必填)**   | number          |     0-100          |     0    |
 | type          | 进度条样式           | string         | blue,green,blue-stripe,green-stripe | blue |
-| size          | 进度条尺寸           | string          | large, small  |     |
+| size          | 进度条尺寸           | string          | large, small  |    |

+ 5 - 5
examples/docs/radio.md

@@ -113,13 +113,13 @@
 ### Radio Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | Radio 的 value   | string,number    |               |         |
-| disabled  | 是否禁用    | boolean   |   | false   |
+| label     | Radio 的 value   | string,number    |               |         |
+| disabled  | 是否禁用    | boolean   |  | false   |
 
 ### Radio-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | Radio 按钮组尺寸   | string  | large, small  |         |
+| size     | Radio 按钮组尺寸   | string  | large, small  |         |
 
 ### Radio-group Events
 | 事件名称 | 说明 | 回调参数 |
@@ -129,5 +129,5 @@
 ### Radio-button Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | Radio 的 value  | string,number  |               |         |
-| disabled  | 是否禁用    | boolean   |   | false   |
+| label     | Radio 的 value  | string,number  |               |         |
+| disabled  | 是否禁用    | boolean   |  | false   |

+ 15 - 15
examples/docs/rate.md

@@ -89,21 +89,21 @@
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| max | 最大分值 | number | - | 5 |
-| disabled | 是否为只读 | boolean | - | false |
-| allow-half | 是否允许半选 | boolean | - | false |
-| low-threshold | 低分和中等分数的界限值,值本身<br>被划分在低分中 | number | - | 2 |
-| high-threshold | 高分和中等分数的界限值,值本身<br>被划分在高分中 | number | - | 4 |
-| colors | icon 的颜色数组,共有 3 个元素,<br>为 3 个分段所对应的颜色 | array | - | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
-| void-color | 未选中 icon 的颜色 | string | - | #C6D1DE |
-| disabled-void-color | 只读时未选中 icon 的颜色 | string | - | #EFF2F7 |
-| icon-classes | icon 的类名数组,共有 3 个元素,<br>为 3 个分段所对应的类名 | array | - | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
-| void-icon-class | 未选中 icon 的类名 | string | - | el-icon-star-off |
-| disabled-void-icon-class | 只读时未选中 icon 的类名 | string | - | el-icon-star-on |
-| show-text | 是否显示辅助文字 | boolean | - | false |
-| text-color | 辅助文字的颜色 | string | - | 1F2D3D |
-| texts | 辅助文字数组 | array | - | ['极差', '失望', '一般', '满意', '惊喜'] |
-| text-template | 只读时的辅助文字模板 | string | - | {value} |
+| max | 最大分值 | number |  | 5 |
+| disabled | 是否为只读 | boolean |  | false |
+| allow-half | 是否允许半选 | boolean |  | false |
+| low-threshold | 低分和中等分数的界限值,值本身<br>被划分在低分中 | number |  | 2 |
+| high-threshold | 高分和中等分数的界限值,值本身<br>被划分在高分中 | number |  | 4 |
+| colors | icon 的颜色数组,共有 3 个元素,<br>为 3 个分段所对应的颜色 | array |  | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| void-color | 未选中 icon 的颜色 | string |  | #C6D1DE |
+| disabled-void-color | 只读时未选中 icon 的颜色 | string |  | #EFF2F7 |
+| icon-classes | icon 的类名数组,共有 3 个元素,<br>为 3 个分段所对应的类名 | array |  | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
+| void-icon-class | 未选中 icon 的类名 | string |  | el-icon-star-off |
+| disabled-void-icon-class | 只读时未选中 icon 的类名 | string |  | el-icon-star-on |
+| show-text | 是否显示辅助文字 | boolean |  | false |
+| text-color | 辅助文字的颜色 | string |  | 1F2D3D |
+| texts | 辅助文字数组 | array |  | ['极差', '失望', '一般', '满意', '惊喜'] |
+| text-template | 只读时的辅助文字模板 | string |  | {value} |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

+ 15 - 15
examples/docs/select.md

@@ -569,16 +569,16 @@
 ### Select Attributes 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| multiple | 是否多选 | boolean | - | false |
-| disabled | 是否禁用 | boolean | - | false |
-| clearable | 单选时是否可以清空选项 | boolean | - | false |
-| name | select input 的 name 属性 | string | - | - |
-| placeholder | 占位符 | string | - | 请选择 |
-| filterable | 是否可搜索 | boolean | - | false |
-| filter-method | 自定义过滤方法 | function | - | - |
-| remote | 是否为远程搜索 | boolean | - | false |
-| remote-method | 远程搜索方法 | function | | - |
-| loading | 是否正在从远程获取数据 | boolean | - | false |
+| multiple | 是否多选 | boolean |  | false |
+| disabled | 是否禁用 | boolean |  | false |
+| clearable | 单选时是否可以清空选项 | boolean |  | false |
+| name | select input 的 name 属性 | string | — | — |
+| placeholder | 占位符 | string |  | 请选择 |
+| filterable | 是否可搜索 | boolean |  | false |
+| filter-method | 自定义过滤方法 | function | — | — |
+| remote | 是否为远程搜索 | boolean |  | false |
+| remote-method | 远程搜索方法 | function | — | — |
+| loading | 是否正在从远程获取数据 | boolean |  | false |
 
 ### Select Events
 | 事件名称 | 说明 | 回调参数 |
@@ -588,12 +588,12 @@
 ### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| label | 分组的组名 | string | - | - |
-| disabled | 是否将该分组下所有选项置为禁用 | boolean | - | false |
+| label | 分组的组名 | string | — | — |
+| disabled | 是否将该分组下所有选项置为禁用 | boolean |  | false |
 
 ### Option Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value | 选项的值 | string/number/object | - | - |
-| label | 选项的标签,若不设置则默认与 `value` 相同 | string/number | - | - |
-| disabled | 是否禁用该选项 | boolean | - | false |
+| value | 选项的值 | string/number/object | — | — |
+| label | 选项的标签,若不设置则默认与 `value` 相同 | string/number | — | — |
+| disabled | 是否禁用该选项 | boolean |  | false |

+ 5 - 5
examples/docs/slider.md

@@ -140,11 +140,11 @@
 ## Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| min | 最小值 | number | - | 0 |
-| max | 最大值 | number | - | 100 |
-| step | 步长 | number | - | 1 |
-| show-input | 是否显示输入框 | boolean | - | false |
-| show-stops | 是否显示间断点 | boolean | - | false |
+| min | 最小值 | number |  | 0 |
+| max | 最大值 | number |  | 100 |
+| step | 步长 | number |  | 1 |
+| show-input | 是否显示输入框 | boolean |  | false |
+| show-stops | 是否显示间断点 | boolean |  | false |
 
 ## Events
 | 事件名称      | 说明    | 回调参数      |

+ 8 - 8
examples/docs/steps.md

@@ -115,18 +115,18 @@ Steps 组件中,我们可以定义每一个步骤的标题(或状态)。
 
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| space | 每个 step 的间距,不填写将自适应间距 | Number | | |
-| 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' |
+| space | 每个 step 的间距,不填写将自适应间距 | Number | | |
+| 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 |
 
 ### Step Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| title | 标题 | string | | |
-| description | 描述性文字 | string | | |
-| icon | 图标 | Element Icon 提供的图标,如果要使用自定义图标可以通过 slot 方式写入 | string | |
+| title | 标题 | string | | |
+| description | 描述性文字 | string | | |
+| icon | 图标 | Element Icon 提供的图标,如果要使用<br>自定义图标可以通过 slot 方式写入 | string | |
 
 ### Step Slot
 | name | 说明  |

+ 11 - 11
examples/docs/switch.md

@@ -55,18 +55,18 @@ Switch 组件提供了平滑的开关。
 ## Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| value     | switch 的选中状态   | boolean    |               | true |
-| disabled  | 是否禁用    | boolean   |  | false   |
-| width  | switch 的宽度(像素)    | number   | | 58(有文字)/ 46(无文字) |
-| on-icon-class  | switch 打开时所显示图标的类名    | string   | | |
-| off-icon-class  | switch 关闭时所显示图标的类名    | string   | | |
-| on-text  | switch 打开时的文字    | string   | | 'ON' |
-| off-text  | switch 关闭时的文字    | string   | | 'OFF' |
-| on-color  | switch 打开时的背景色    | string   | | |
-| off-color  | switch 关闭时的背景色    | string   | | |
-| name  | switch 对应的 name 属性    | string   | | |
+| value     | switch 的选中状态   | boolean    |               | true |
+| disabled  | 是否禁用    | boolean   |  | false   |
+| width  | switch 的宽度(像素)    | number   | | 58(有文字)/ 46(无文字) |
+| on-icon-class  | switch 打开时所显示图标的类名    | string   | | |
+| off-icon-class  | switch 关闭时所显示图标的类名    | string   | | |
+| on-text  | switch 打开时的文字    | string   | | 'ON' |
+| off-text  | switch 关闭时的文字    | string   | | 'OFF' |
+| on-color  | switch 打开时的背景色    | string   | | |
+| off-color  | switch 关闭时的背景色    | string   | | |
+| name  | switch 对应的 name 属性    | string   | | |
 
 ## Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| change  | switch 状态发生变化时的回调函数    |  |
+| change  | switch 状态发生变化时的回调函数    |  |

+ 15 - 15
examples/docs/table.md

@@ -598,7 +598,7 @@
 
 选择多行数据时使用 Checkbox
 
-:::demo 除了`selection-mode`的设置外,多选与单选并没有太大差别,只是传入`selectionchange`事件中的参数从对象变成了对象数组。此外,需要提供一个列来显示多选框: 手动添加一个`el-table-column`,设`type`属性为`selection`即可。在本例中,为了方便说明其他属性,我们还使用了`inline-template`和`show-tooltip-when-overflow`属性,设置了`inline-template`属性后,可以通过调用`row`对象中的值取代`property`属性的设置。而如果设置了宽度,默认情况无法完整显示的内容会被隐藏,可以使用`show-tooltip-when-overflow`属性,它接受一个`Boolean`,为`true`时当 hover 在指定内容上就会显示完整内容
+:::demo 除了`selection-mode`的设置外,多选与单选并没有太大差别,只是传入`selectionchange`事件中的参数从对象变成了对象数组。此外,需要提供一个列来显示多选框: 手动添加一个`el-table-column`,设`type`属性为`selection`即可。在本例中,为了方便说明其他属性,我们还使用了`inline-template`和`show-tooltip-when-overflow`设置了`inline-template`属性后,可以通过调用`row`对象中的值取代`property`属性的设置;默认情况下若内容过多会折行显示,若需要单行显示可以使用`show-tooltip-when-overflow`属性,它接受一个`Boolean`,为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来
 ```html
 <template>
   <el-table
@@ -742,13 +742,13 @@
 ### Table Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| data | 显示的数据 | array | - | - |
-| height | table 的高度,默认高度为空,即自动高度 | string | - | - |
-| stripe | 是否为斑马纹 table | boolean | - | false |
-| border | 是否带有纵向边框 | boolean | - | false |
+| data | 显示的数据 | array | — | — |
+| height | table 的高度,默认高度为空,即自动高度 | string | — | — |
+| stripe | 是否为斑马纹 table | boolean |  | false |
+| border | 是否带有纵向边框 | boolean |  | false |
 | selection-mode | 列表项选择模式 | string | single/multiple/none | none |
-| allow-no-selection | 单选模式是否允许选项为空 | boolean | - | false |
-| fixed-column-count | 固定列的个数 | number | - | 0 |
+| allow-no-selection | 单选模式是否允许选项为空 | boolean |  | false |
+| fixed-column-count | 固定列的个数 | number |  | 0 |
 
 ### Table Events
 | 事件名 | 说明 | 参数 |
@@ -761,11 +761,11 @@
 ### Table-column Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| label | 显示的标题 | string | - | - |
-| property | 对应列内容的字段名 | string | - | - |
-| width | 对应列的宽度 | string | - | - |
-| sortable | 对应列是否可以排序 | boolean | - | false |
-| type | 对应列的类型。如果设置了 `selection` 则显示多选框,如果设置了 `index` 则显示该行的索引(从 1 开始计算) | string | selection/index | - |
-| formatter | 用来格式化内容,在 formatter 执行的时候,会传入 row 和 column | function | - | - |
-| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | - | false |
-| inline-template | 指定该属性后可以自定义 column 模板,参考多选的时间列,通过 row 获取行信息,JSX 里通过 _self 获取当前上下文。此时不需要配置 property 属性  | - | - |
+| label | 显示的标题 | string | — | — |
+| property | 对应列内容的字段名 | string | — | — |
+| width | 对应列的宽度 | string | — | — |
+| sortable | 对应列是否可以排序 | boolean |  | false |
+| type | 对应列的类型。如果设置了 `selection` 则显示多选框,如果设置了 `index` 则显示该行的索引(从 1 开始计算) | string | selection/index |  |
+| formatter | 用来格式化内容,在 formatter 执行的时候,会传入 row 和 column | function | — | — |
+| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean |  | false |
+| inline-template | 指定该属性后可以自定义 column 模板,参考多选的时间列,通过 row 获取行信息,JSX 里通过 _self 获取当前上下文。此时不需要配置 property 属性  | — | — |

+ 4 - 4
examples/docs/tabs.md

@@ -115,9 +115,9 @@
 ### Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| type     | 风格类型   | string   | card, border-card  |         |
+| type     | 风格类型   | string   | card, border-card  |         |
 | closable  | 标签是否可关闭   | boolean   | true, false |  false  |
-| active-name  | 选中选项卡的 name  | string   |    |    |
+| active-name  | 选中选项卡的 name  | string   |    |    |
 
 ### Tabs Events
 | 事件名称 | 说明 | 回调参数 |
@@ -128,5 +128,5 @@
 ### Tab-pane Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | 选项卡标题   | string   |  |         |
-| name       | 与选项卡 activeName 对应的标识符,表示选项卡别名   | string   |  |  该选项卡在选项卡中的 name 值,如第一个选项卡则为'1'  |
+| label     | 选项卡标题   | string   |  |         |
+| name       | 与选项卡 activeName 对应的标识符,表示选项卡别名   | string   |  |  该选项卡在选项卡中的 name 值,如第一个选项卡则为'1'  |

+ 5 - 5
examples/docs/tag.md

@@ -100,13 +100,13 @@ Tag 组件提供了六种主题。
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 主题 | string | 'primary', 'gray', 'success', 'warning', 'error' |  |
-| closable | 是否可关闭 | boolean | | false |
-| close-transition | 是否禁用关闭时的渐变动画 | boolean | | false |
-| hit | 是否有边框描边 | boolean | | false |
+| type | 主题 | string | 'primary', 'gray', 'success', 'warning', 'error' |  |
+| closable | 是否可关闭 | boolean | | false |
+| close-transition | 是否禁用关闭时的渐变动画 | boolean | | false |
+| hit | 是否有边框描边 | boolean | | false |
 
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
-| close | 关闭tag时触发的事件 |  |
+| close | 关闭tag时触发的事件 |  |

+ 8 - 8
examples/docs/time-picker.md

@@ -103,21 +103,21 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | 只读 | boolean | - | false |
-| placeholder | 占位内容 | string | - | - |
+| readonly | 只读 | boolean |  | false |
+| placeholder | 占位内容 | string | — | — |
 | format | 时间格式化 | string | 小时:`HH`,分:`mm`,秒:`ss` | 'HH:mm:ss' |
-| picker-options | 当前时间日期选择器特有的选项,参考下表 | object | - | {} |
+| picker-options | 当前时间日期选择器特有的选项,参考下表 | object |  | {} |
 
 ### Time Select Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| start | 开始时间 | string | - | 09:00 |
-| end | 结束时间 | string | - | 18:00 |
-| step | 间隔时间 | string | - | 00:30 |
-| minTime | 最小时间,小于该时间的时间段将被禁用 | string | - | 00:00 |
+| start | 开始时间 | string |  | 09:00 |
+| end | 结束时间 | string |  | 18:00 |
+| step | 间隔时间 | string |  | 00:30 |
+| minTime | 最小时间,小于该时间的时间段将被禁用 | string |  | 00:00 |
 
 ### Time Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| selectableRange | 可选时间段,例如<br>`'18:30:00 - 20:30:00'`<br>或者传入数组<br>`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | - | - |
+| selectableRange | 可选时间段,例如<br>`'18:30:00 - 20:30:00'`<br>或者传入数组<br>`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
 

+ 7 - 7
examples/docs/tooltip.md

@@ -165,12 +165,12 @@ Tooltip 组件提供了两个不同的主题:`dark`和`light`。
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 |  effect        |  默认提供的主题  | String            | `dark`, `light`  | dark  |
-|  content        |  显示的内容,也可以通过 `slot#content` 传入 DOM  | String            |  |  |
+|  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 |
-|  visible        |  初始状态是否可见  | Boolean           |  |  false |
-|  disabled       |  Tooltip 是否可用  | Boolean           |  |  false |
-|  offset        |  出现位置的偏移量  | Number           |  |  0 |
-|  transition     |  定义渐变动画      | String             |  | `fade-in-linear` |
-|  visible-arrow   |  是否显示 Tooltip 箭头,更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean |  | true |
+|  visible        |  初始状态是否可见  | Boolean           |  |  false |
+|  disabled       |  Tooltip 是否可用  | Boolean           |  |  false |
+|  offset        |  出现位置的偏移量  | Number           |  |  0 |
+|  transition     |  定义渐变动画      | String             |  | `fade-in-linear` |
+|  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 |
+| openDelay | 延迟出现,单位毫秒 | Number | | 0 |

+ 1 - 1
examples/docs/upload.md

@@ -134,7 +134,7 @@
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| action | 必选参数, 上传的地址 | string | - | — |
+| action | 必选参数, 上传的地址 | string |  | — |
 | headers | 可选参数, 设置上传的请求头部 | object | — | — |
 | multiple | 可选参数, 是否支持多选文件 | boolean | — | — |
 | file | 可选参数, 上传的文件字段名 | string | — | file |

+ 1 - 0
packages/message-box/src/main.js

@@ -161,6 +161,7 @@ MessageBox.alert = function(message, title, options) {
     title: title,
     message: message,
     $type: 'alert',
+    closeOnPressEscape: false,
     closeOnClickModal: false
   }, options));
 };

+ 11 - 3
packages/message-box/src/main.vue

@@ -10,7 +10,7 @@
           <div class="el-message-box__status" :class="[ typeClass ]"></div>
           <div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }"><p>{{ message }}</p></div>
           <div class="el-message-box__input" v-show="showInput">
-            <input type="text" v-model="inputValue" :placeholder="inputPlaceholder" ref="input" />
+            <el-input v-model="inputValue" :placeholder="inputPlaceholder" ref="input"></el-input>
             <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{ editorErrorMessage }}</div>
           </div>
         </div>
@@ -34,6 +34,7 @@
   };
 
   import Popup from 'vue-popup';
+  import ElInput from 'packages/input/index.js';
 
   export default {
     mixins: [ Popup ],
@@ -54,6 +55,10 @@
       }
     },
 
+    components: {
+      ElInput
+    },
+
     computed: {
       typeClass() {
         return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
@@ -98,6 +103,7 @@
           var inputPattern = this.inputPattern;
           if (inputPattern && !inputPattern.test(this.inputValue || '')) {
             this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
+            this.$refs.input.$el.querySelector('input').classList.add('invalid');
             return false;
           }
           var inputValidator = this.inputValidator;
@@ -105,6 +111,7 @@
             var validateResult = inputValidator(this.inputValue);
             if (validateResult === false) {
               this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
+              this.$refs.input.$el.querySelector('input').classList.add('invalid');
               return false;
             }
             if (typeof validateResult === 'string') {
@@ -114,6 +121,7 @@
           }
         }
         this.editorErrorMessage = '';
+        this.$refs.input.$el.querySelector('input').classList.remove('invalid');
         return true;
       }
     },
@@ -128,8 +136,8 @@
       value(val) {
         if (val && this.$type === 'prompt') {
           setTimeout(() => {
-            if (this.$refs.input) {
-              this.$refs.input.focus();
+            if (this.$refs.input && this.$refs.input.$el) {
+              this.$refs.input.$el.querySelector('input').focus();
             }
           }, 500);
         }

+ 1 - 0
packages/table/src/table-body.js

@@ -51,6 +51,7 @@ export default {
                 {
                   this._l(this.columns, (column) =>
                     <td
+                      style={{ 'white-space': column.showTooltipWhenOverflow ? 'nowrap' : 'normal' }}
                       class={ column.id }
                       on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                       on-mouseleave={ this.handleCellMouseLeave }>

+ 5 - 1
packages/table/src/table-column.js

@@ -83,7 +83,10 @@ export default {
       type: Boolean,
       default: true
     },
-    showTooltipWhenOverflow: Boolean,
+    showTooltipWhenOverflow: {
+      type: Boolean,
+      default: false
+    },
     formatter: Function
   },
 
@@ -159,6 +162,7 @@ export default {
       realWidth: width || minWidth,
       sortable: this.sortable,
       resizable: this.resizable,
+      showTooltipWhenOverflow: this.showTooltipWhenOverflow,
       formatter: this.formatter
     });
 

+ 8 - 12
packages/theme-default/src/message-box.css

@@ -39,24 +39,20 @@
     }
 
     @e input {
-      & > input {
-        border: 1px solid #dedede;
-        border-radius: 5px;
-        padding: 4px 5px;
-        margin-top: 10px;
-        width: 100%;
-        box-sizing: border-box;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        outline: none;
+      padding-top: 15px;
+      & input.invalid {
+        border-color: #ff4949;
+        &:focus {
+          border-color: #ff4949;
+        }
       }
     }
 
     @e errormsg {
       color: red;
       font-size: 12px;
-      min-height: 16px;
+      min-height: 18px;
+      margin-top: 2px;
     }
 
     @e title {

+ 4 - 1
packages/theme-default/src/table.css

@@ -48,6 +48,10 @@
       }
     }
 
+    & th {
+      white-space: nowrap;
+    }
+
     & th, td {
       height: 20px;
       max-width: 250px;
@@ -55,7 +59,6 @@
       box-sizing: border-box;
       overflow: hidden;
       text-overflow: ellipsis;
-      white-space: nowrap;
       vertical-align: middle;
       position: relative;
       border-bottom: 1px solid var(--table-border-color);