Skip to content

Commit b5cad9a

Browse files
hunterliu1003hunterliu1003
committed
update docs
1 parent b4afed3 commit b5cad9a

File tree

2 files changed

+125
-29
lines changed

2 files changed

+125
-29
lines changed

‎README.md

Lines changed: 62 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -200,11 +200,29 @@ You can use:
200200

201201
All modal instances include show and hide.
202202

203-
### `$vfm.show(name)`
203+
### `$vfm.show(name, params)`
204204

205205
- Type: `Function`
206206
- Arguments:
207207
- name: `String` - Name of the modal
208+
- params: `?: object` - Any data that you would want to pass into the modal (@before-open event handler will contain `params` in the event). You can also using scoped-slot to get `params` in template:
209+
210+
```html
211+
<template v-slot="{ params }">
212+
<!-- modal content -->
213+
</template>
214+
```
215+
216+
Or get `params` on `@beforeOpen` event:
217+
218+
```html
219+
<vue-final-modal @beforeOpen="e => e.ref.params">
220+
<!-- modal content -->
221+
</vue-final-modal>
222+
```
223+
224+
> `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
225+
208226
- Example:
209227

210228
```html
@@ -254,12 +272,29 @@ export default {
254272

255273
hide all modals.
256274

257-
### `$vfm.toggle(name, show)`
275+
### `$vfm.toggle(name, show, params)`
258276

259277
- Type: `Function`
260278
- Arguments:
261279
- name: `String` - Name of the modal
262-
- show: `Boolean` - Show modal or not
280+
- show: `?: Boolean` - Show modal or not
281+
- params: `?: object` - Any data that you would want to pass into the modal (@before-open event handler will contain params in the event). You can also using scoped-slot to get `params` in template:
282+
283+
```html
284+
<template v-slot="{ params }">
285+
<!-- modal content -->
286+
</template>
287+
```
288+
289+
Or get `params` on `@beforeOpen` event:
290+
291+
```html
292+
<vue-final-modal @beforeOpen="e => e.ref.params">
293+
<!-- modal content -->
294+
</vue-final-modal>
295+
```
296+
297+
> `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
263298
264299
toggle modal by name.
265300

@@ -300,21 +335,41 @@ toggle modal by name.
300335
301336
### `@before-open`
302337

303-
- Emits while modal is still invisible, but before transition starting. Further opening of the modal can be blocked from this event listener by calling `event.stop()` .
338+
- Emits while modal is still invisible, but before transition starting. Further opening of the modal can be blocked from this event listener by calling `event.stop()`.
304339

305340
### `@opened`
306341

307342
- Emits after modal became visible and transition ended.
308343

309344
### `@before-close`
310345

311-
- Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling `event.stop()` .
346+
- Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling `event.stop()`.
312347

313348
### `@closed`
314349

315-
- Emits right before modal is destroyed.
350+
- Emits right before modal is destroyed. Further after the modal was closed, you can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
351+
352+
## **Slots**
353+
354+
If you open a modal though API `show(name, params)`, You can using scoped-slot to get `params` in template:
355+
356+
```html
357+
<template v-slot="{ params }">
358+
<!-- modal content -->
359+
</template>
360+
```
361+
362+
Or get `params` on `@beforeOpen` event:
363+
364+
```html
365+
<vue-final-modal @beforeOpen="e => e.ref.params">
366+
<!-- modal content -->
367+
</vue-final-modal>
368+
```
369+
370+
> `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
316371
317-
## Contribution
372+
## **Contribution**
318373

319374
👋 Hi I'm Hunter, the author of `vue-final-modal`.
320375

‎docs/content/en/index.md

Lines changed: 63 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -168,8 +168,6 @@ this.$vfm.show('example')
168168

169169
## **Configuration**
170170

171-
<badge>v0.18+</badge>
172-
173171
Configuration options can be passed as a second argument to `Vue.use`.
174172

175173
```js
@@ -194,8 +192,6 @@ Changes API name from "$vfm" to any other string value. It is useful when you us
194192

195193
## **API**
196194

197-
<badge>v0.15+</badge>
198-
199195
Plugin API can be called within any component through `this.$vfm`.
200196

201197
### `$vfm.openedModals`
@@ -214,11 +210,29 @@ You can use:
214210

215211
All modal instances include show and hide.
216212

217-
### `$vfm.show(name)`
213+
### `$vfm.show(name, params)`
218214

219215
- Type: `Function`
220216
- Arguments:
221217
- name: `String` - Name of the modal
218+
- params: `?: object` - Any data that you would want to pass into the modal (@before-open event handler will contain `params` in the event). You can also using scoped-slot to get params in template:
219+
220+
```html
221+
<template v-slot="{ params }">
222+
<!-- modal content -->
223+
</template>
224+
```
225+
226+
Or get `params` on `@beforeOpen` event:
227+
228+
```html
229+
<vue-final-modal @beforeOpen="e => e.ref.params">
230+
<!-- modal content -->
231+
</vue-final-modal>
232+
```
233+
234+
> `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
235+
222236
- Example:
223237

224238
```html
@@ -268,12 +282,29 @@ export default {
268282

269283
hide all modals.
270284

271-
### `$vfm.toggle(name, show)`
285+
### `$vfm.toggle(name, show, params)`
272286

273287
- Type: `Function`
274288
- Arguments:
275289
- name: `String` - Name of the modal
276-
- show: `Boolean` - Show modal or not
290+
- show: `?: Boolean` - Show modal or not
291+
- params: `?: object` - Any data that you would want to pass into the modal (@before-open event handler will contain params in the event). You can also using scoped-slot to get params in template:
292+
293+
```html
294+
<template v-slot="{ params }">
295+
<!-- modal content -->
296+
</template>
297+
```
298+
299+
Or get `params` on `@beforeOpen` event:
300+
301+
```html
302+
<vue-final-modal @beforeOpen="e => e.ref.params">
303+
<!-- modal content -->
304+
</vue-final-modal>
305+
```
306+
307+
> `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
277308
278309
toggle modal by name.
279310

@@ -308,23 +339,20 @@ Custom class names for the modal content element.
308339
Custom class names for the modal overlay element.
309340

310341
### `styles`
311-
<badge>v0.17+</badge><badge>v1.4+</badge>
312342

313343
- Type: `[String, Object, Array]`
314344
- Default: `''`
315345

316346
Style that will be applied to the modal container element.
317347

318348
### `contentStyle`
319-
<badge>v0.17+</badge><badge>v1.4+</badge>
320349

321350
- Type: `[String, Object, Array]`
322351
- Default: `''`
323352

324353
Style that will be applied to the modal content element.
325354

326355
### `overlayStyle`
327-
<badge>v0.17+</badge><badge>v1.4+</badge>
328356

329357
- Type: `[String, Object, Array]`
330358
- Default: `''`
@@ -394,8 +422,6 @@ Clicking overlay of modal to close the modal.
394422

395423
### `escToClose`
396424

397-
<badge>v0.19+</badge>
398-
399425
- Type: `Boolean`
400426
- Default: `false`
401427

@@ -436,8 +462,6 @@ Set specific `z-index` to root of the modal element. If zIndex is set, `zIndexBa
436462

437463
### `focusRemain`
438464

439-
<badge>v0.19+</badge>
440-
441465
- Type: `Boolean`
442466
- Default: `true`
443467

@@ -477,8 +501,6 @@ Enables focus trap meaning that only inputs/buttons that are withing the modal w
477501

478502
### `@click-outside`
479503

480-
<badge>v0.14+</badge>
481-
482504
- Emits while modal container on click.
483505

484506
<alert>
@@ -489,23 +511,42 @@ If prop `clickToClose` is `false`, the event will still be emitted.
489511

490512
### `@before-open`
491513

492-
- Emits while modal is still invisible, but before transition starting. Further opening of the modal can be blocked from this event listener by calling `event.stop()` .
514+
- Emits while modal is still invisible, but before transition starting. Further opening of the modal can be blocked from this event listener by calling `event.stop()`.
493515

494516
### `@opened`
495517

496518
- Emits after modal became visible and transition ended.
497519

498520
### `@before-close`
499521

500-
- Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling `event.stop()` .
501-
502-
#
522+
- Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling `event.stop()`.
503523

504524
### `@closed`
505525

506-
- Emits right before modal is destroyed.
526+
- Emits right before modal is destroyed. Further after the modal was closed, you can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
527+
528+
## **Slots**
529+
530+
If you open a modal though API `$vfm.show(name, params)`, You can using scoped-slot to get `params` in template:
531+
532+
```html
533+
<template v-slot="{ params }">
534+
<!-- modal content -->
535+
</template>
536+
```
537+
538+
Or get `params` on `@beforeOpen` event:
539+
540+
```html
541+
<vue-final-modal @beforeOpen="e => e.ref.params">
542+
<!-- modal content -->
543+
</vue-final-modal>
544+
```
545+
546+
> `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
547+
507548

508-
## Contribution
549+
## **Contribution**
509550

510551
👋 Hi I'm Hunter, the author of `vue-final-modal`.
511552

0 commit comments

Comments
 (0)