mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
157 lines
4.2 KiB
Markdown
157 lines
4.2 KiB
Markdown
## Dialog
|
||
|
||
### Install
|
||
|
||
```js
|
||
import { Dialog } from 'vant';
|
||
|
||
Vue.use(Dialog);
|
||
```
|
||
|
||
### Usage
|
||
|
||
#### Alert dialog
|
||
|
||
Used to prompt for some messages, only including one confirm button
|
||
|
||
```javascript
|
||
Dialog.alert({
|
||
title: 'Title',
|
||
message: 'Content'
|
||
}).then(() => {
|
||
// on close
|
||
});
|
||
|
||
Dialog.alert({
|
||
message: 'Content'
|
||
}).then(() => {
|
||
// on close
|
||
});
|
||
```
|
||
|
||
#### Confirm dialog
|
||
|
||
Used to confirm some messages, including a confirm button and a cancel button
|
||
|
||
```javascript
|
||
Dialog.confirm({
|
||
title: 'Title',
|
||
message: 'Content'
|
||
}).then(() => {
|
||
// on confirm
|
||
}).catch(() => {
|
||
// on cancel
|
||
});
|
||
```
|
||
|
||
#### $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.
|
||
|
||
```js
|
||
export default {
|
||
mounted() {
|
||
this.$dialog.alert({
|
||
message: 'Content'
|
||
});
|
||
}
|
||
}
|
||
```
|
||
|
||
### Methods
|
||
|
||
| Name | Attribute | Return value | Description |
|
||
|------|------|------|------|
|
||
| Dialog | `options` | `Promise` | Show dialog |
|
||
| Dialog.alert | `options` | `Promise` | Show alert dialog |
|
||
| Dialog.confirm | `options` | `Promise` | Show confim dialog |
|
||
| Dialog.setDefaultOptions | `options` | `void` | Set default options of all dialogs |
|
||
| Dialog.resetDefaultOptions | - | `void` | Reset default options of all dialogs |
|
||
| Dialog.close | - | `void` | Close dialog |
|
||
|
||
### Options
|
||
|
||
| Attribute | Description | Type | Default |
|
||
|------|------|------|------|
|
||
| title | Title | `String` | - |
|
||
| message | Message | `String` | - |
|
||
| messageAlign | Message text align，can be set to `left` `right` | `String` | `center` |
|
||
| className | Custom className | `String | Array | Object` | - |
|
||
| showConfirmButton | Whether to show confirm button | `Boolean` | `true` |
|
||
| showCancelButton | Whether to show cancel button | `Boolean` | `false` |
|
||
| confirmButtonText | Confirm button text | `String` | `Confirm` |
|
||
| cancelButtonText | Cancel button test | `String` | `Cancel` |
|
||
| overlay | Whether to show overlay | `Boolean` | `true` |
|
||
| 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 | - |
|
||
|
||
#### Advanced Usage
|
||
|
||
If you need to render vue components within a dialog, you can use dialog component.
|
||
|
||
```html
|
||
<van-dialog v-model="show" :asyncConfirm="onClickConfirmAsync">
|
||
<van-field
|
||
v-model="username"
|
||
label="Username"
|
||
placeholder="Username"
|
||
/>
|
||
<van-field
|
||
v-model="password"
|
||
type="password"
|
||
label="Password"
|
||
placeholder="Password"
|
||
/>
|
||
</van-dialog>
|
||
```
|
||
|
||
```js
|
||
Vue.use(Dialog);
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
username: '',
|
||
password: ''
|
||
};
|
||
},
|
||
|
||
methods: {
|
||
beforeClose(action, done) {
|
||
if (action === 'confirm') {
|
||
setTimeout(done, 1000);
|
||
} else {
|
||
done();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### API
|
||
|
||
| Attribute | Description | Type | Default |
|
||
|------|------|------|------|
|
||
| v-model | Whether to show dialog | `Boolean` | - |
|
||
| title | Title | `String` | - |
|
||
| 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` |
|
||
| confirm-button-text | Confirm button text | `String` | `Confirm` |
|
||
| cancel-button-text | Cancel button test | `String` | `Cancel` |
|
||
| overlay | Whether to show overlay | `Boolean` | `true` |
|
||
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `false` |
|
||
| 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 | - |
|
||
| get-container | Return the mount node for Dialog | `String | () => HTMLElement` | - |
|
||
|
||
### Event
|
||
|
||
| Event | Description | Parameters |
|
||
|------|------|------|
|
||
| confirm | Triggered when click confirm button | - |
|
||
| cancel | Triggered when click cancel button | - |
|