16
16
</a >
17
17
</p >
18
18
19
- ### 🎉 [ Documentation ] ( https://vue-final-modal.org )
19
+ Looking for a Vue 3 version? [ It's over here ] ( https://github.com/hunterliu1003/ vue-final-modal/tree/next )
20
20
21
- ### 🙌 [ Examples] ( https://vue-final-modal.org/examples )
21
+ ## 🎉 [ Documentation] ( https://vue-final-modal.org )
22
+
23
+ ## 🙌 [ Examples] ( https://vue-final-modal.org/examples )
22
24
23
25
## Introduction
24
26
@@ -39,7 +41,7 @@ features:
39
41
- Tiny bundle size
40
42
- Accessibility support
41
43
42
- ## Install
44
+ ## Installation
43
45
44
46
** Vue 3.0**
45
47
55
57
yarn add vue-final-modal@next
56
58
```
57
59
58
- ** Vue 2.x **
60
+ ** Vue 2.0 **
59
61
60
62
NPM:
61
63
@@ -71,7 +73,11 @@ yarn add vue-final-modal
71
73
72
74
## Basic usage
73
75
74
- ** 1. Import and register the modal component.**
76
+ ### Register
77
+
78
+ #### Vue
79
+
80
+ - ** Register in SFC**
75
81
76
82
``` js
77
83
import { VueFinalModal } from ' vue-final-modal'
@@ -83,21 +89,65 @@ export default {
83
89
}
84
90
```
85
91
86
- ** 2. Add the modal component to the template.**
92
+ - ** Install globally**
93
+
94
+ ``` js
95
+ import { VueFinalModal } from ' vue-final-modal'
96
+
97
+ Vue .component (' VueFinalModal' , VueFinalModal)
98
+ ```
99
+
100
+ #### Nuxt
101
+
102
+ - ** Write a plugin ` vue-final-modal.js ` **
103
+
104
+ ``` js
105
+ // plugins/vue-final-modal.js
106
+ import VueFinalModal from ' vue-final-modal/lib/VueFinalModal.vue'
107
+
108
+ Vue .component (' VueFinalModal' , VueFinalModal)
109
+ ```
110
+
111
+ - ** Add plugin into ` nuxt.config.js ` **
112
+
113
+ ``` js
114
+ // nuxt.config.js
115
+ export default {
116
+ plugins: [
117
+ ' ~plugins/vue-final-modal.js'
118
+ ],
119
+ }
120
+ ```
121
+
122
+ #### CDN
123
+
124
+ - ** jsDelivr**
125
+
126
+ ``` html
127
+ <script src =" https://cdn.jsdelivr.net/npm/vue-final-modal" ></script >
128
+ ```
129
+
130
+ - ** Unpkg**
131
+
132
+ ``` html
133
+ <script src =" https://unpkg.com/vue-final-modal" ></script >
134
+ ```
135
+
136
+ ### ** Add component to template**
87
137
88
138
``` html
89
139
<vue-final-modal v-model =" showModal" >
90
140
Modal Content Here
91
141
</vue-final-modal >
92
142
```
93
143
94
- ** 3. Create a button to toggle the modal. **
144
+ ### ** Create a button**
95
145
96
146
``` html
97
147
<button @click =" showModal = true" >Launch</button >
98
148
```
99
149
100
- ** 4. All default props**
150
+ ### ** Default props**
101
151
102
152
``` js
103
153
const CLASS_TYPES = [String , Object , Array ]
@@ -120,13 +170,29 @@ const CLASS_TYPES = [String, Object, Array]
120
170
}
121
171
```
122
172
123
- ** 5. Events.**
173
+ ## ** Events**
174
+
175
+ ### ` @click-outside `
176
+
177
+ - Emits while modal container on click.
178
+
179
+ > If prop ` clickToClose ` is ` false ` , the event will still be emitted.
180
+
181
+ ### ` @before-open `
182
+
183
+ - Emits while modal is still invisible, but before transition starting.
184
+
185
+ ### ` @opened `
186
+
187
+ - Emits after modal became visible and transition ended.
188
+
189
+ ### ` @before-close `
190
+
191
+ - Emits before modal is going to be closed.
192
+
193
+ ### ` @closed `
124
194
125
- - @click-outside : Modal container on click
126
- - @before-open : Before open
127
- - @opened : When opened
128
- - @before-close : Before close
129
- - @closed : After closed
195
+ - Emits right before modal is destroyed.
130
196
131
197
## Contribution
132
198
0 commit comments