Merge pull request #138 from Leopoldthecoder/next

update message box prompt style

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 |

examples/docs/breadcrumb.md

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

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 |

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' } |

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
 | 事件名称      | 说明    | 回调参数      |

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 | — | — |

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 | — | — |
 
 

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 按钮操作区的内容 |
 
 ### 方法

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 |

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 |

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 | — | — |

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 | — | — |

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
 | 事件名称 | 说明 | 回调参数 |

examples/docs/popover.md

@@ -185,11 +185,11 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   ref="popover5"
   placement="top"
   width="160"
-  :visible.sync="visible2">
+  :visible="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>
+    <el-button size="mini" type="text" @click.native="visible2 = false">取消</el-button>
+    <el-button type="primary" size="mini" @click.native="visible2 = false">确定</el-button>
   </div>
 </el-popover>
 
@@ -200,18 +200,18 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| trigger | 触发方式 | String  | 'click', 'focus', 'hover' |    click    |
-|  title              | 标题 | String |  |   |
-|  content        |  显示的内容，也可以通过 `slot#` 传入 DOM   | String            |  |  |
-|  width        |  宽度  | String, Number            |  | 最小宽度 150px |
-|  placement        |  出现位置  | String           |  `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` |  bottom |
-|  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 |
+| trigger | 触发方式 | String  | click/focus/hover |    click    |
+|  title              | 标题 | String | — | — |
+|  content        |  显示的内容，也可以通过 `slot` 传入 DOM   | String            | — | — |
+|  width        |  宽度  | String, Number            | — | 最小宽度 150px |
+|  placement        |  出现位置  | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+|  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文本 |

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  |  —  |

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   |

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
 | 事件名称      | 说明    | 回调参数      |

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 |

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
 | 事件名称      | 说明    | 回调参数      |

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 | 说明  |

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 状态发生变化时的回调函数    | — |

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 属性  | — | — |

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'  |

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时触发的事件 | — |

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 | — | — |
 

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 |

examples/docs/upload.md

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

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));
 };

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);
         }

packages/popover/src/main.vue

@@ -54,9 +54,9 @@ export default {
   },
 
   mounted() {
+    setTimeout(() => {
       let _timer;
       const reference = this.reference || this.$refs.reference;
-
       this.$nextTick(() => {
         if (this.trigger === 'click') {
           on(reference, 'click', () => { this.showPopper = !this.showPopper; });
@@ -100,6 +100,7 @@ export default {
           }
         }
       });
+    }, 100);
   },
 
   destroyed() {

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 }>

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
     });
 

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 {

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);