diff --git a/examples/docs/badge.md b/examples/docs/badge.md
index d1f0497eb..6886a2cdc 100644
--- a/examples/docs/badge.md
+++ b/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 |
diff --git a/examples/docs/breadcrumb.md b/examples/docs/breadcrumb.md
index 6a44f3525..1938caf8a 100644
--- a/examples/docs/breadcrumb.md
+++ b/examples/docs/breadcrumb.md
@@ -20,4 +20,4 @@ Breadcrumb,面包屑导航,用于提供给用户一个回溯到首页的路
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
-| separator | 分隔符 | string | | 斜杠'/' |
+| separator | 分隔符 | string | — | 斜杠'/' |
diff --git a/examples/docs/button.md b/examples/docs/button.md
index b3d97d992..5e7949736 100644
--- a/examples/docs/button.md
+++ b/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 |
diff --git a/examples/docs/card.md b/examples/docs/card.md
index 4ecd3a75d..55d706cb0 100644
--- a/examples/docs/card.md
+++ b/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' } |
diff --git a/examples/docs/checkbox.md b/examples/docs/checkbox.md
index a4f04f82d..34d173a4a 100644
--- a/examples/docs/checkbox.md
+++ b/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
| 事件名称 | 说明 | 回调参数 |
diff --git a/examples/docs/date-picker.md b/examples/docs/date-picker.md
index 4df798b55..d8e0bb890 100644
--- a/examples/docs/date-picker.md
+++ b/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`,
小时 `HH`,分 `mm`,秒 `ss` | yyyy-MM-dd |
-| shortcuts | 快捷选项列表,配置信息
查看下表 | object[] | - | - |
+| shortcuts | 快捷选项列表,配置信息
查看下表 | object[] | — | — |
### Shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
-| text | 标题文本 | string | - | - |
-| onClick | 选中后的回调函数,参数是 vm,可通过触发 'pick' 事件设置
选择器的值。例如 vm.$emit('pick', new Date()) | function | | |
+| text | 标题文本 | string | — | — |
+| onClick | 选中后的回调函数,参数是 vm,可通过触发 'pick' 事件设置
选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
diff --git a/examples/docs/datetime-picker.md b/examples/docs/datetime-picker.md
index e997b7df0..912515eaf 100644
--- a/examples/docs/datetime-picker.md
+++ b/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`,
小时 `HH`,分 `mm`,秒 `ss` | yyyy-MM-dd |
-| shortcuts | 快捷选项列表,配置信息
查看下表 | object[] | - | - |
+| shortcuts | 快捷选项列表,配置信息
查看下表 | object[] | — | — |
### Shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
-| text | 标题文本 | string | - | - |
-| onClick | 选中后的回调函数,参数是 vm,可通过触发 'pick' 事件设置
选择器的值。例如 vm.$emit('pick', new Date()) | function | | |
+| text | 标题文本 | string | — | — |
+| onClick | 选中后的回调函数,参数是 vm,可通过触发 'pick' 事件设置
选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
diff --git a/examples/docs/dialog.md b/examples/docs/dialog.md
index 1c66285e1..262b8626c 100644
--- a/examples/docs/dialog.md
+++ b/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 按钮操作区的内容 |
### 方法
diff --git a/examples/docs/dropdown.md b/examples/docs/dropdown.md
index 1227e4512..bad23adad 100644
--- a/examples/docs/dropdown.md
+++ b/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 |
diff --git a/examples/docs/layout.md b/examples/docs/layout.md
index 48960519d..2011fe3db 100644
--- a/examples/docs/layout.md
+++ b/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 |
diff --git a/examples/docs/message-box.md b/examples/docs/message-box.md
index 159484bcf..b69b78d29 100644
--- a/examples/docs/message-box.md
+++ b/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
- 打开 Alert
+ 点击打开 Message Box
```
:::
-下面是一个 confirm 框。
+### 提交内容
-:::demo 在这里我们用了`Promise`来处理后续响应。
+当用户进行操作时会被触发,中断用户操作,提示用户进行输入的对话框
+
+:::demo 调用`$prompt`方法即可打开消息提示,它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式,或者用`inputValidator`规定校验函数,可以返回`Boolean`或`String`,`Boolean`为`false`或字符串时均表示校验未通过,`String`相当于定义了`inputErrorMessage`字段。此外,可以用`inputPlaceholder`字段来定义输入框的占位符。
```html
- 打开 confirm
+ 点击打开 Message Box
-```
-:::
-
-Prompt 框功能强大,可以处理简单的输入。
-
-:::demo 可以用`inputPattern`字段自己规定匹配模式,或者用`inputValidator`规定校验函数,可以返回`Boolean`或`String`,`Boolean`为`false`或字符串时均表示校验为通过,`String`相当于定义了`inputErrorMessage`字段。此外,可以用`inputPlaceholder`字段来定义输入框的占位符。
-
-```html
-
- 打开 prompt
-
-
-