Skip to content

Commit 7c0fcb4

Browse files
authored
Update README.md
1 parent ac1b8c6 commit 7c0fcb4

File tree

1 file changed

+60
-1
lines changed

1 file changed

+60
-1
lines changed

README.md

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# v-dialogs · [![npm version](https://img.shields.io/npm/v/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs) [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/) [![npm](https://img.shields.io/npm/dy/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs)
1+
# [v-dialogs](https://terryz.github.io/vue/#/dialog) · [![npm version](https://img.shields.io/npm/v/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs) [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/) [![npm](https://img.shields.io/npm/dy/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs)
22

33
A simple and powerful dialog for **Vue2**, dialog type including **Modal**, **Alert**, **Mask** and **Toast**
44

@@ -31,6 +31,65 @@ import vDialog from 'v-dialogs';
3131
Vue.use(vDialog, { global config options... });
3232
```
3333

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+
3493
## Vue plugin series
3594
3695
| Plugin | Status | Description |

0 commit comments

Comments
 (0)