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 ``` ::: -下面是一个 confirm 框。 +### 提交内容 -:::demo 在这里我们用了`Promise`来处理后续响应。 +当用户进行操作时会被触发,中断用户操作,提示用户进行输入的对话框 + +:::demo 调用`$prompt`方法即可打开消息提示,它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式,或者用`inputValidator`规定校验函数,可以返回`Boolean`或`String`,`Boolean`为`false`或字符串时均表示校验未通过,`String`相当于定义了`inputErrorMessage`字段。此外,可以用`inputPlaceholder`字段来定义输入框的占位符。 ```html -``` -::: - -Prompt 框功能强大,可以处理简单的输入。 - -:::demo 可以用`inputPattern`字段自己规定匹配模式,或者用`inputValidator`规定校验函数,可以返回`Boolean`或`String`,`Boolean`为`false`或字符串时均表示校验为通过,`String`相当于定义了`inputErrorMessage`字段。此外,可以用`inputPlaceholder`字段来定义输入框的占位符。 - -```html - - -