|
1 |
| -# v-dialogs · [](https://www.npmjs.com/package/v-dialogs) [](https://mit-license.org/) [](https://www.npmjs.com/package/v-dialogs) |
| 1 | +# [v-dialogs](https://terryz.github.io/vue/#/dialog) · [](https://www.npmjs.com/package/v-dialogs) [](https://mit-license.org/) [](https://www.npmjs.com/package/v-dialogs) |
2 | 2 |
|
3 | 3 | A simple and powerful dialog for **Vue2**, dialog type including **Modal**, **Alert**, **Mask** and **Toast**
|
4 | 4 |
|
@@ -31,6 +31,65 @@ import vDialog from 'v-dialogs';
|
31 | 31 | Vue.use(vDialog, { global config options... });
|
32 | 32 | ```
|
33 | 33 |
|
| 34 | +## Usage |
| 35 | + |
| 36 | +### Modal |
| 37 | + |
| 38 | +```js |
| 39 | +import Profile from './Profile.vue' |
| 40 | + |
| 41 | +this.$dlg.modal(Profile, { |
| 42 | + width: 400, |
| 43 | + height: 300, |
| 44 | + title: 'User Profile', |
| 45 | + params: { |
| 46 | + userId: 1, |
| 47 | + userName: 'Terry Zeng' |
| 48 | + }, |
| 49 | + callback: data => { |
| 50 | + this.$dlg.alert(`Received message: ${data}`) |
| 51 | + } |
| 52 | +}) |
| 53 | +``` |
| 54 | + |
| 55 | +### Alert |
| 56 | + |
| 57 | +```js |
| 58 | +// alert message |
| 59 | +this.$dlg.alert('message') |
| 60 | +// alert message with callback |
| 61 | +this.$dlg.alert('message', () => { // do somthing }) |
| 62 | +// alert message with options |
| 63 | +this.$dlg.alert('message', { ...options }) |
| 64 | +// alert message with callaback and options |
| 65 | +this.$dlg.alert('message', callback, options) |
| 66 | +``` |
| 67 | +
|
| 68 | +### Mask |
| 69 | +
|
| 70 | +```js |
| 71 | +const key = this.$dlg.mask('Data loading, please hold on a moment...') |
| 72 | + |
| 73 | +// do some stuff |
| 74 | +job().then(resp => { |
| 75 | + // close mark layer when job done |
| 76 | + this.$dlg.close(key) |
| 77 | +}) |
| 78 | +``` |
| 79 | +
|
| 80 | +### Toast |
| 81 | +
|
| 82 | +```js |
| 83 | +// show message in corner |
| 84 | +this.$dlg.taost('message') |
| 85 | +// show message with callback |
| 86 | +this.$dlg.taost('message', () => { // do somthing }) |
| 87 | +// show message with options |
| 88 | +this.$dlg.taost('message', { ...options }) |
| 89 | +// show message with callaback and options |
| 90 | +this.$dlg.taost('message', callback, options) |
| 91 | +``` |
| 92 | +
|
34 | 93 | ## Vue plugin series
|
35 | 94 |
|
36 | 95 | | Plugin | Status | Description |
|
|
0 commit comments