Skip to content

Commit f86ec52

Browse files
hunterliu1003hunterliu1003
committed
add example
1 parent 2bcae32 commit f86ec52

File tree

4 files changed

+309
-8
lines changed

4 files changed

+309
-8
lines changed

‎example/src/App.vue

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
<template>
22
<div id="app" class="p-4">
3+
<h2 class="text-3xl py-2">Options:</h2>
34
<BasicOptions />
45

5-
<p class="text-xl py-2">v-basic:</p>
6+
<h2 class="text-3xl py-2">v-basic:</h2>
67
<v-basic></v-basic>
7-
<p class="text-xl py-2">v-background:</p>
8+
<h2 class="text-3xl py-2">v-background:</h2>
89
<v-background></v-background>
9-
<p class="text-xl py-2">v-centered:</p>
10+
<h2 class="text-3xl py-2">v-centered:</h2>
1011
<v-centered></v-centered>
11-
<p class="text-xl py-2">v-content:</p>
12+
<h2 class="text-3xl py-2">v-content:</h2>
1213
<v-content></v-content>
13-
<p class="text-xl py-2">v-close:</p>
14+
<h2 class="text-3xl py-2">v-close:</h2>
1415
<v-close-button></v-close-button>
15-
<p class="text-xl py-2">v-scrollable:</p>
16+
<h2 class="text-3xl py-2">v-scrollable:</h2>
1617
<v-scrollable></v-scrollable>
17-
<p class="text-xl py-2">v-action:</p>
18+
<h2 class="text-3xl py-2">v-action:</h2>
1819
<v-action-buttons></v-action-buttons>
19-
<p class="text-xl py-2">v-stackable:</p>
20+
<h2 class="text-3xl py-2">v-stackable:</h2>
2021
<v-stackable></v-stackable>
22+
<h2 class="text-3xl py-2">Pass Params:</h2>
23+
<v-params></v-params>
24+
<h2 class="text-3xl py-2">Stop before close:</h2>
25+
<v-stop-before-close></v-stop-before-close>
26+
<h2 class="text-3xl py-2">Stop before open:</h2>
27+
<v-stop-before-open></v-stop-before-open>
2128

2229
<div v-for="i in 100" :key="i">{{ i }}</div>
2330
</div>

‎example/src/components/basic/VParams.vue

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<template>
2+
<div>
3+
<vue-final-modal
4+
v-model="showModal"
5+
name="stackable"
6+
classes="modal-container"
7+
content-class="modal-content"
8+
prevent-click
9+
@closed="e => e.stop()"
10+
>
11+
<template v-slot="{ params }">
12+
<button class="modal__close" @click="$vfm.hide('stackable')">
13+
<mdi-close></mdi-close>
14+
</button>
15+
<span class="modal__title"
16+
>{{ params.test }} Hello, vue-final-modal</span
17+
>
18+
<div class="modal__content">
19+
<p v-for="i in 5" :key="i">
20+
Vue Final Modal is a renderless, stackable, detachable and
21+
lightweight modal component.
22+
</p>
23+
</div>
24+
<div class="modal__action">
25+
<button class="vfm-btn" @click="$vfm.hide('stackable')">
26+
confirm
27+
</button>
28+
<button class="vfm-btn" @click="$vfm.hide('stackable')">
29+
cancel
30+
</button>
31+
</div>
32+
</template>
33+
</vue-final-modal>
34+
<button class="vfm-btn" @click="$vfm.show('stackable', { test: 123 })">
35+
Show modal with params
36+
</button>
37+
<button
38+
class="vfm-btn"
39+
@click="$vfm.toggle('stackable', null, { test: 321 })"
40+
>
41+
Toggle modal with params
42+
</button>
43+
<button class="vfm-btn" @click="$vfm.show('stackable')">
44+
Show modal
45+
</button>
46+
<button class="vfm-btn" @click="$vfm.hide('stackable')">
47+
Hide modal
48+
</button>
49+
</div>
50+
</template>
51+
52+
<script>
53+
export default {
54+
data: () => ({
55+
showModal: false
56+
}),
57+
methods: {
58+
confirm() {
59+
this.showModal = false
60+
}
61+
}
62+
}
63+
</script>
64+
65+
<style scoped>
66+
::v-deep .modal-container {
67+
display: flex;
68+
justify-content: center;
69+
align-items: center;
70+
}
71+
::v-deep .modal-content {
72+
position: relative;
73+
display: flex;
74+
flex-direction: column;
75+
max-height: 90%;
76+
margin: 0 1rem;
77+
padding: 1rem;
78+
border: 1px solid #e2e8f0;
79+
border-radius: 0.25rem;
80+
background: #fff;
81+
}
82+
.modal__title {
83+
margin: 0 2rem 0.5rem 0;
84+
font-size: 1.5rem;
85+
font-weight: 700;
86+
}
87+
.modal__content {
88+
flex-grow: 1;
89+
overflow-y: auto;
90+
}
91+
.modal__action {
92+
display: flex;
93+
justify-content: center;
94+
align-items: center;
95+
flex-shrink: 0;
96+
padding: 1rem 0 0;
97+
}
98+
.modal__close {
99+
position: absolute;
100+
top: 0.5rem;
101+
right: 0.5rem;
102+
}
103+
</style>
104+
105+
<style scoped>
106+
.dark-mode div::v-deep .modal-content {
107+
border-color: #2d3748;
108+
background-color: #1a202c;
109+
}
110+
</style>

‎example/src/components/basic/VStopBeforeClose.vue

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<template>
2+
<div>
3+
<vue-final-modal
4+
v-model="showModal"
5+
classes="modal-container"
6+
content-class="modal-content"
7+
@before-close="e => e.stop()"
8+
>
9+
<template>
10+
<button class="modal__close" @click="showModal = false">
11+
<mdi-close></mdi-close>
12+
</button>
13+
<span class="modal__title">Hello, vue-final-modal</span>
14+
<div class="modal__content">
15+
<p v-for="i in 5" :key="i">
16+
Vue Final Modal is a renderless, stackable, detachable and
17+
lightweight modal component.
18+
</p>
19+
</div>
20+
<div class="modal__action">
21+
<button class="vfm-btn" @click="showModal = false">
22+
confirm
23+
</button>
24+
<button class="vfm-btn" @click="showModal = false">
25+
cancel
26+
</button>
27+
</div>
28+
</template>
29+
</vue-final-modal>
30+
<button class="vfm-btn" @click="showModal = true">Open modal</button>
31+
</div>
32+
</template>
33+
34+
<script>
35+
export default {
36+
data: () => ({
37+
showModal: false
38+
}),
39+
methods: {
40+
confirm() {
41+
this.showModal = false
42+
}
43+
}
44+
}
45+
</script>
46+
47+
<style scoped>
48+
::v-deep .modal-container {
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
}
53+
::v-deep .modal-content {
54+
position: relative;
55+
display: flex;
56+
flex-direction: column;
57+
max-height: 90%;
58+
margin: 0 1rem;
59+
padding: 1rem;
60+
border: 1px solid #e2e8f0;
61+
border-radius: 0.25rem;
62+
background: #fff;
63+
}
64+
.modal__title {
65+
margin: 0 2rem 0.5rem 0;
66+
font-size: 1.5rem;
67+
font-weight: 700;
68+
}
69+
.modal__content {
70+
flex-grow: 1;
71+
overflow-y: auto;
72+
}
73+
.modal__action {
74+
display: flex;
75+
justify-content: center;
76+
align-items: center;
77+
flex-shrink: 0;
78+
padding: 1rem 0 0;
79+
}
80+
.modal__close {
81+
position: absolute;
82+
top: 0.5rem;
83+
right: 0.5rem;
84+
}
85+
</style>
86+
87+
<style scoped>
88+
.dark-mode div::v-deep .modal-content {
89+
border-color: #2d3748;
90+
background-color: #1a202c;
91+
}
92+
</style>

‎example/src/components/basic/VStopBeforeOpen.vue

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<template>
2+
<div>
3+
<vue-final-modal
4+
v-model="showModal"
5+
classes="modal-container"
6+
content-class="modal-content"
7+
@before-open="e => e.stop()"
8+
>
9+
<template>
10+
<button class="modal__close" @click="showModal = false">
11+
<mdi-close></mdi-close>
12+
</button>
13+
<span class="modal__title">Hello, vue-final-modal</span>
14+
<div class="modal__content">
15+
<p v-for="i in 5" :key="i">
16+
Vue Final Modal is a renderless, stackable, detachable and
17+
lightweight modal component.
18+
</p>
19+
</div>
20+
<div class="modal__action">
21+
<button class="vfm-btn" @click="showModal = false">
22+
confirm
23+
</button>
24+
<button class="vfm-btn" @click="showModal = false">
25+
cancel
26+
</button>
27+
</div>
28+
</template>
29+
</vue-final-modal>
30+
<button class="vfm-btn" @click="showModal = true">Open modal</button>
31+
</div>
32+
</template>
33+
34+
<script>
35+
export default {
36+
data: () => ({
37+
showModal: false
38+
}),
39+
methods: {
40+
confirm() {
41+
this.showModal = false
42+
}
43+
}
44+
}
45+
</script>
46+
47+
<style scoped>
48+
::v-deep .modal-container {
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
}
53+
::v-deep .modal-content {
54+
position: relative;
55+
display: flex;
56+
flex-direction: column;
57+
max-height: 90%;
58+
margin: 0 1rem;
59+
padding: 1rem;
60+
border: 1px solid #e2e8f0;
61+
border-radius: 0.25rem;
62+
background: #fff;
63+
}
64+
.modal__title {
65+
margin: 0 2rem 0.5rem 0;
66+
font-size: 1.5rem;
67+
font-weight: 700;
68+
}
69+
.modal__content {
70+
flex-grow: 1;
71+
overflow-y: auto;
72+
}
73+
.modal__action {
74+
display: flex;
75+
justify-content: center;
76+
align-items: center;
77+
flex-shrink: 0;
78+
padding: 1rem 0 0;
79+
}
80+
.modal__close {
81+
position: absolute;
82+
top: 0.5rem;
83+
right: 0.5rem;
84+
}
85+
</style>
86+
87+
<style scoped>
88+
.dark-mode div::v-deep .modal-content {
89+
border-color: #2d3748;
90+
background-color: #1a202c;
91+
}
92+
</style>

0 commit comments

Comments
 (0)