alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: prettier all markdown files

Browse Source
This commit is contained in:
chenjiahan
2020-04-11 09:17:33 +08:00
committed by neverland
parent 48067f79db
commit 7f84f8a487
140 changed files with 4441 additions and 4723 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dialog/README.md
+74 -72
View File
@@ -18,13 +18,13 @@ Used to prompt for some messages, only including one confirm button
```js
Dialog.alert({
title: 'Title',
message: 'Content'
message: 'Content',
}).then(() => {
// on close
});
Dialog.alert({
message: 'Content'
message: 'Content',
}).then(() => {
// on close
});
@@ -35,14 +35,16 @@ Dialog.alert({
Used to confirm some messages, including a confirm button and a cancel button
```js
Dialog.confirm({
Dialog.confirm({
title: 'Title',
message: 'Content'
}).then(() => {
// on confirm
}).catch(() => {
// on cancel
});
message: 'Content',
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
```
### Asnyc Close
@@ -59,22 +61,22 @@ function beforeClose(action, done) {
Dialog.confirm({
title: 'Title',
message: 'Content',
beforeClose
beforeClose,
});
```
### $dialog Method
### \$dialog Method
After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
After import the Dialog component, the \$dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
```js
export default {
mounted() {
this.$dialog.alert({
message: 'Content'
message: 'Content',
});
}
}
},
};
```
### Advanced Usage
@@ -83,7 +85,7 @@ If you need to render vue components within a dialog, you can use dialog compone
```html
<van-dialog v-model="show" title="Title" show-cancel-button>
<img src="https://img.yzcdn.cn/vant/apple-3.jpg">
<img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog>
```
@@ -91,10 +93,10 @@ If you need to render vue components within a dialog, you can use dialog compone
export default {
data() {
return {
show: false
show: false,
};
}
}
},
};
```
## API
@@ -102,7 +104,7 @@ export default {
### Methods
| Name | Description | Attribute | Return value |
|------|------|------|------|
| --- | --- | --- | --- |
| Dialog | Show dialog | `options` | `Promise` |
| Dialog.alert | Show alert dialog | `options` | `Promise` |
| Dialog.confirm | Show confim dialog | `options` | `Promise` |
@@ -113,68 +115,68 @@ export default {
### Options
| Attribute | Description | Type | Default |
|------|------|------|------|
| title | Title | *string* | - |
| width `v2.2.7` | Width | *number \| string* | `320px` |
| message | Message | *string* | - |
| messageAlign | Message text align，can be set to `left` `right` | *string* | `center` |
| className | Custom className | *any* | - |
| showConfirmButton | Whether to show confirm button | *boolean* | `true` |
| showCancelButton | Whether to show cancel button | *boolean* | `false` |
| cancelButtonText | Cancel button text | *string* | `Cancel` |
| cancelButtonColor | Cancel button color | *string* | `black` |
| confirmButtonText | Confirm button text | *string* | `Confirm` |
| confirmButtonColor | Confirm button color | *string* | `#1989fa` |
| overlay | Whether to show overlay | *boolean* | `true` |
| overlayClass `v2.2.7` | Custom overlay class | *string* | - |
| overlayStyle `v2.2.7` | Custom overlay style | *object* | - |
| closeOnPopstate `v2.0.5` | Whether to close when popstate | *boolean* | `false` |
| closeOnClickOverlay | Whether to close when click overlay | *boolean* | `false` |
| lockScroll | Whether to lock body scroll | *boolean* | `true` |
| --- | --- | --- | --- |
| title | Title | _string_ | - |
| width `v2.2.7` | Width | _number \| string_ | `320px` |
| message | Message | _string_ | - |
| messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` |
| className | Custom className | _any_ | - |
| showConfirmButton | Whether to show confirm button | _boolean_ | `true` |
| showCancelButton | Whether to show cancel button | _boolean_ | `false` |
| cancelButtonText | Cancel button text | _string_ | `Cancel` |
| cancelButtonColor | Cancel button color | _string_ | `black` |
| confirmButtonText | Confirm button text | _string_ | `Confirm` |
| confirmButtonColor | Confirm button color | _string_ | `#1989fa` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| overlayClass `v2.2.7` | Custom overlay class | _string_ | - |
| overlayStyle `v2.2.7` | Custom overlay style | _object_ | - |
| closeOnPopstate `v2.0.5` | Whether to close when popstate | _boolean_ | `false` |
| closeOnClickOverlay | Whether to close when click overlay | _boolean_ | `false` |
| lockScroll | Whether to lock body scroll | _boolean_ | `true` |
| beforeClose | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - |
| getContainer | Return the mount node for Dialog | *string \| () => Element* | `body` |
| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
| getContainer | Return the mount node for Dialog | _string \| () => Element_ | `body` |
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| v-model | Whether to show dialog | *boolean* | - |
| title | Title | *string* | - |
| width `v2.2.7` | Width | *number \| string* | `320px` |
| message | Message | *string* | - |
| message-align | Message align，can be set to `left` `right` | *string* | `center` |
| show-confirm-button | Whether to show confirm button | *boolean* | `true` |
| show-cancel-button | Whether to show cancel button | *boolean* | `false` |
| cancel-button-text | Cancel button text | *string* | `Cancel` |
| cancel-button-color | Cancel button color | *string* | `black` |
| confirm-button-text | Confirm button text | *string* | `Confirm` |
| confirm-button-color | Confirm button color | *string* | `#1989fa` |
| overlay | Whether to show overlay | *boolean* | `true` |
| overlay-class `v2.2.7` | Custom overlay class | *string* | - |
| overlay-style `v2.2.7` | Custom overlay style | *object* | - |
| close-on-popstate `v2.0.5` | Whether to close when popstate | *boolean* | `false` |
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `false` |
| lazy-render | Whether to lazy render util appeared | *boolean* | `true` |
| lock-scroll | Whether to lock background scroll | *boolean* | `true` |
| --- | --- | --- | --- |
| v-model | Whether to show dialog | _boolean_ | - |
| title | Title | _string_ | - |
| width `v2.2.7` | Width | _number \| string_ | `320px` |
| message | Message | _string_ | - |
| message-align | Message align，can be set to `left` `right` | _string_ | `center` |
| show-confirm-button | Whether to show confirm button | _boolean_ | `true` |
| show-cancel-button | Whether to show cancel button | _boolean_ | `false` |
| cancel-button-text | Cancel button text | _string_ | `Cancel` |
| cancel-button-color | Cancel button color | _string_ | `black` |
| confirm-button-text | Confirm button text | _string_ | `Confirm` |
| confirm-button-color | Confirm button color | _string_ | `#1989fa` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| overlay-class `v2.2.7` | Custom overlay class | _string_ | - |
| overlay-style `v2.2.7` | Custom overlay style | _object_ | - |
| close-on-popstate `v2.0.5` | Whether to close when popstate | _boolean_ | `false` |
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `false` |
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
| before-close | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - |
| get-container | Return the mount node for Dialog | *string \| () => Element* | - |
| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
| get-container | Return the mount node for Dialog | _string \| () => Element_ | - |
### Events
| Event | Description | Parameters |
|------|------|------|
| confirm | Triggered when click confirm button | - |
| cancel | Triggered when click cancel button | - |
| open | Triggered when open Dialog | - |
| close | Triggered when close Dialog | - |
| opened | Triggered when opened Dialog | - |
| closed | Triggered when closed Dialog | - |
| Event | Description | Parameters |
| ------- | ----------------------------------- | ---------- |
| confirm | Triggered when click confirm button | - |
| cancel | Triggered when click cancel button | - |
| open | Triggered when open Dialog | - |
| close | Triggered when close Dialog | - |
| opened | Triggered when opened Dialog | - |
| closed | Triggered when closed Dialog | - |
### Slots
| Name | Description |
|------|------|
| Name | Description |
| ------- | -------------- |
| default | Custom message |
| title | Custom title |
| title | Custom title |
src/dialog/README.zh-CN.md
+77 -76
View File
@@ -30,9 +30,9 @@ Vue.use(Dialog);
// 局部注册
export default {
components: {
[Dialog.Component.name]: Dialog.Component
}
}
[Dialog.Component.name]: Dialog.Component,
},
};
```
## 代码演示
@@ -44,13 +44,13 @@ export default {
```js
Dialog.alert({
title: '标题',
message: '弹窗内容'
message: '弹窗内容',
}).then(() => {
// on close
});
Dialog.alert({
message: '弹窗内容'
message: '弹窗内容',
}).then(() => {
// on close
});
@@ -63,12 +63,14 @@ Dialog.alert({
```js
Dialog.confirm({
title: '标题',
message: '弹窗内容'
}).then(() => {
// on confirm
}).catch(() => {
// on cancel
});
message: '弹窗内容',
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
```
### 异步关闭
@@ -85,22 +87,22 @@ function beforeClose(action, done) {
Dialog.confirm({
title: '标题',
message: '弹窗内容',
beforeClose
beforeClose,
});
```
### 全局方法
引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法
引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 \$dialog 方法，在所有组件内部都可以直接调用此方法
```js
export default {
mounted() {
this.$dialog.alert({
message: '弹窗内容'
message: '弹窗内容',
});
}
}
},
};
```
### 组件调用
@@ -109,7 +111,7 @@ export default {
```html
<van-dialog v-model="show" title="标题" show-cancel-button>
<img src="https://img.yzcdn.cn/vant/apple-3.jpg">
<img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog>
```
@@ -117,19 +119,18 @@ export default {
export default {
data() {
return {
show: false
show: false,
};
}
}
},
};
```
## API
### 方法
| 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------|
| --- | --- | --- | --- |
| Dialog | 展示弹窗 | `options` | `Promise` |
| Dialog.alert | 展示消息提示弹窗 | `options` | `Promise` |
| Dialog.confirm | 展示消息确认弹窗 | `options` | `Promise` |
@@ -142,74 +143,74 @@ export default {
通过函数调用 `Dialog` 时，支持传入以下选项：
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| title | 标题 | *string* | - |
| width `v2.2.7` | 弹窗宽度，默认单位为`px` | *number \| string* | `320px` |
| message | 文本内容，支持通过`\n`换行 | *string* | - |
| messageAlign | 内容对齐方式，可选值为`left` `right` | *string* | `center` |
| className | 自定义类名 | *any* | - |
| showConfirmButton | 是否展示确认按钮 | *boolean* | `true` |
| showCancelButton | 是否展示取消按钮 | *boolean* | `false` |
| confirmButtonText | 确认按钮文案 | *string* | `确认` |
| confirmButtonColor | 确认按钮颜色 | *string* | `#1989fa` |
| cancelButtonText | 取消按钮文案 | *string* | `取消` |
| cancelButtonColor | 取消按钮颜色 | *string* | `black` |
| overlay | 是否展示遮罩层 | *boolean* | `true` |
| overlayClass `v2.2.7` | 自定义遮罩层类名 | *string* | - |
| overlayStyle `v2.2.7` | 自定义遮罩层样式 | *object* | - |
| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | *boolean* | `false` |
| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | *boolean* | `false` |
| lockScroll | 是否锁定背景滚动 | *boolean* | `true` |
| beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - |
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - |
| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | `body` |
| --- | --- | --- | --- |
| title | 标题 | _string_ | - |
| width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
| message | 文本内容，支持通过`\n`换行 | _string_ | - |
| messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
| className | 自定义类名 | _any_ | - |
| showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` |
| showCancelButton | 是否展示取消按钮 | _boolean_ | `false` |
| confirmButtonText | 确认按钮文案 | _string_ | `确认` |
| confirmButtonColor | 确认按钮颜色 | _string_ | `#1989fa` |
| cancelButtonText | 取消按钮文案 | _string_ | `取消` |
| cancelButtonColor | 取消按钮颜色 | _string_ | `black` |
| overlay | 是否展示遮罩层 | _boolean_ | `true` |
| overlayClass `v2.2.7` | 自定义遮罩层类名 | _string_ | - |
| overlayStyle `v2.2.7` | 自定义遮罩层样式 | _object_ | - |
| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
| lockScroll | 是否锁定背景滚动 | _boolean_ | `true` |
| beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
### Props
通过组件调用 `Dialog` 时，支持以下 Props：
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| v-model | 是否显示弹窗 | *boolean* | - |
| title | 标题 | *string* | - |
| width `v2.2.7` | 弹窗宽度，默认单位为`px` | *number \| string* | `320px` |
| message | 文本内容，支持通过`\n`换行 | *string* | - |
| message-align | 内容对齐方式，可选值为`left` `right` | *string* | `center` |
| show-confirm-button | 是否展示确认按钮 | *boolean* | `true` |
| show-cancel-button | 是否展示取消按钮 | *boolean* | `false` |
| confirm-button-text | 确认按钮文案 | *string* | `确认` |
| confirm-button-color | 确认按钮颜色 | *string* | `#1989fa` |
| cancel-button-text | 取消按钮文案 | *string* | `取消` |
| cancel-button-color | 取消按钮颜色 | *string* | `black` |
| overlay | 是否展示遮罩层 | *boolean* | `true` |
| overlay-class `v2.2.7` | 自定义遮罩层类名 | *string* | - |
| overlay-style `v2.2.7` | 自定义遮罩层样式 | *object* | - |
| close-on-popstate `v2.0.5` | 是否在页面回退时自动关闭 | *boolean* | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | *boolean* | `false` |
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` |
| before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - |
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - |
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
| --- | --- | --- | --- |
| v-model | 是否显示弹窗 | _boolean_ | - |
| title | 标题 | _string_ | - |
| width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
| message | 文本内容，支持通过`\n`换行 | _string_ | - |
| message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
| show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
| show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
| confirm-button-text | 确认按钮文案 | _string_ | `确认` |
| confirm-button-color | 确认按钮颜色 | _string_ | `#1989fa` |
| cancel-button-text | 取消按钮文案 | _string_ | `取消` |
| cancel-button-color | 取消按钮颜色 | _string_ | `black` |
| overlay | 是否展示遮罩层 | _boolean_ | `true` |
| overlay-class `v2.2.7` | 自定义遮罩层类名 | _string_ | - |
| overlay-style `v2.2.7` | 自定义遮罩层样式 | _object_ | - |
| close-on-popstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
| before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
### Events
通过组件调用 `Dialog` 时，支持以下事件：
| 事件 | 说明 | 回调参数 |
|------|------|------|
| confirm | 点击确认按钮时触发 | - |
| cancel | 点击取消按钮时触发 | - |
| open | 打开弹窗时触发 | - |
| close | 关闭弹窗时触发 | - |
| opened | 打开弹窗且动画结束后触发 | - |
| closed | 关闭弹窗且动画结束后触发 | - |
| 事件 | 说明 | 回调参数 |
| ------- | ------------------------ | -------- |
| confirm | 点击确认按钮时触发 | - |
| cancel | 点击取消按钮时触发 | - |
| open | 打开弹窗时触发 | - |
| close | 关闭弹窗时触发 | - |
| opened | 打开弹窗且动画结束后触发 | - |
| closed | 关闭弹窗且动画结束后触发 | - |
### Slots
通过组件调用 `Dialog` 时，支持以下插槽：
| 名称 | 说明 |
|------|------|
| 名称 | 说明 |
| ------- | ---------- |
| default | 自定义内容 |
| title | 自定义标题 |
| title | 自定义标题 |