Skip to content

Commit feb455d

Browse files
hunterliu1003hunterliu1003
committed
docs: fix examples of syntax
1 parent cbbc460 commit feb455d

File tree

10 files changed

+92
-146
lines changed

10 files changed

+92
-146
lines changed

‎docs/components/examples/basic/VDynamicModal.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
11
<template>
2-
<vue-final-modal v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
2+
<vue-final-modal
3+
v-slot="{ close }"
4+
v-bind="$attrs"
5+
classes="modal-container"
6+
content-class="modal-content"
7+
v-on="$listeners"
8+
>
39
<button class="modal__close" @click="close">
410
<mdi-close></mdi-close>
511
</button>
612
<span class="modal__title">Hello, vue-final-modal</span>
713
<div class="modal__content">
8-
<p>
9-
Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
10-
</p>
14+
<p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
1115
</div>
1216
</vue-final-modal>
1317
</template>
1418

1519
<script>
1620
export default {
17-
inheritAttrs: false,
18-
methods: {
19-
close() {
20-
this.$emit('input', false)
21-
}
22-
}
21+
inheritAttrs: false
2322
}
2423
</script>
2524

‎docs/components/examples/hoc/VModal.vue‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,31 @@
11
<template>
2-
<vue-final-modal v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
3-
<template v-slot="{ params }">
4-
<span class="modal__title">
5-
<slot name="title"></slot>
6-
</span>
7-
<div class="modal__content">
8-
<slot v-bind:params="params"></slot>
9-
</div>
10-
<div class="modal__action">
11-
<button class="vfm-btn" @click="$emit('confirm', close)">
12-
confirm
13-
</button>
14-
<button class="vfm-btn" @click="$emit('cancel', close)">
15-
cancel
16-
</button>
17-
</div>
18-
<button class="modal__close" @click="close">
19-
<mdi-close></mdi-close>
20-
</button>
21-
</template>
2+
<vue-final-modal
3+
v-slot="{ params, close }"
4+
v-bind="$attrs"
5+
classes="modal-container"
6+
content-class="modal-content"
7+
v-on="$listeners"
8+
>
9+
<span class="modal__title">
10+
<slot name="title"></slot>
11+
</span>
12+
<div class="modal__content">
13+
<slot v-bind:params="params"></slot>
14+
</div>
15+
<div class="modal__action">
16+
<button class="vfm-btn" @click="$emit('confirm', close)">confirm</button>
17+
<button class="vfm-btn" @click="$emit('cancel', close)">cancel</button>
18+
</div>
19+
<button class="modal__close" @click="close">
20+
<mdi-close></mdi-close>
21+
</button>
2222
</vue-final-modal>
2323
</template>
2424

2525
<script>
2626
export default {
2727
name: 'VModal',
28-
inheritAttrs: false,
29-
methods: {
30-
close() {
31-
this.$emit('input', false)
32-
}
33-
}
28+
inheritAttrs: false
3429
}
3530
</script>
3631

‎docs/components/examples/hoc/VTailwindModal.vue‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,30 @@
11
<template>
22
<vue-final-modal
3+
v-slot="{ params, close }"
34
v-bind="$attrs"
45
classes="flex justify-center items-center"
56
content-class="relative flex flex-col max-h-full mx-4 p-4 border dark:border-gray-800 rounded bg-white dark:bg-gray-900"
67
v-on="$listeners"
78
>
8-
<template v-slot="{ params }">
9-
<span class="mr-8 text-2xl font-bold ">
10-
<slot name="title"></slot>
11-
</span>
12-
<div class="flex-grow overflow-y-auto">
13-
<slot v-bind:params="params"></slot>
14-
</div>
15-
<div class="flex-shrink-0 flex justify-center items-center pt-4">
16-
<button class="vfm-btn" @click="$emit('confirm', close)">
17-
confirm
18-
</button>
19-
<button class="vfm-btn" @click="$emit('cancel', close)">
20-
cancel
21-
</button>
22-
</div>
23-
<button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
24-
<mdi-close></mdi-close>
25-
</button>
26-
</template>
9+
<span class="mr-8 text-2xl font-bold ">
10+
<slot name="title"></slot>
11+
</span>
12+
<div class="flex-grow overflow-y-auto">
13+
<slot v-bind:params="params"></slot>
14+
</div>
15+
<div class="flex-shrink-0 flex justify-center items-center pt-4">
16+
<button class="vfm-btn" @click="$emit('confirm', close)">confirm</button>
17+
<button class="vfm-btn" @click="$emit('cancel', close)">cancel</button>
18+
</div>
19+
<button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
20+
<mdi-close></mdi-close>
21+
</button>
2722
</vue-final-modal>
2823
</template>
2924

3025
<script>
3126
export default {
3227
name: 'VTailwindModal',
33-
inheritAttrs: false,
34-
methods: {
35-
close() {
36-
this.$emit('input', false)
37-
}
38-
}
28+
inheritAttrs: false
3929
}
4030
</script>

‎docs/content/en/dynamic-modal.md‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ export default {
103103
```vue
104104
<template>
105105
<vue-final-modal
106+
v-slot="{ close }"
106107
v-bind="$attrs"
107108
classes="modal-container"
108109
content-class="modal-content"
@@ -113,22 +114,14 @@ export default {
113114
</button>
114115
<span class="modal__title">Hello, vue-final-modal</span>
115116
<div class="modal__content">
116-
<p>
117-
Vue Final Modal is a renderless, stackable, detachable and lightweight
118-
modal component.
119-
</p>
117+
<p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
120118
</div>
121119
</vue-final-modal>
122120
</template>
123121
124122
<script>
125123
export default {
126-
inheritAttrs: false,
127-
methods: {
128-
close() {
129-
this.$emit('input', false)
130-
}
131-
}
124+
inheritAttrs: false
132125
}
133126
</script>
134127

‎docs/content/en/examples/recommend.md‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ You can create a `higher-order component` easily and can customize `template`, `
2020
```vue
2121
<template>
2222
<vue-final-modal
23+
v-slot="{ params, close }"
2324
v-bind="$attrs"
2425
classes="modal-container"
2526
content-class="modal-content"
@@ -29,7 +30,7 @@ You can create a `higher-order component` easily and can customize `template`, `
2930
<slot name="title"></slot>
3031
</span>
3132
<div class="modal__content">
32-
<slot></slot>
33+
<slot v-bind:params="params"></slot>
3334
</div>
3435
<div class="modal__action">
3536
<button class="vfm-btn" @click="$emit('confirm', close)">confirm</button>
@@ -44,12 +45,7 @@ You can create a `higher-order component` easily and can customize `template`, `
4445
<script>
4546
export default {
4647
name: 'VModal',
47-
inheritAttrs: false,
48-
methods: {
49-
close() {
50-
this.$emit('input', false)
51-
}
52-
}
48+
inheritAttrs: false
5349
}
5450
</script>
5551
@@ -99,6 +95,7 @@ export default {
9995
background-color: #1a202c;
10096
}
10197
</style>
98+
10299
```
103100

104101
</show-code>

‎docs/content/en/examples/tailwind.md‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,44 +20,35 @@ You can create a `higher-order component` easily and can customize `template`, `
2020
```vue
2121
<template>
2222
<vue-final-modal
23+
v-slot="{ params, close }"
2324
v-bind="$attrs"
2425
classes="flex justify-center items-center"
2526
content-class="relative flex flex-col max-h-full mx-4 p-4 border dark:border-gray-800 rounded bg-white dark:bg-gray-900"
2627
v-on="$listeners"
2728
>
28-
<template v-slot="{ params }">
29-
<span class="mr-8 text-2xl font-bold ">
30-
<slot name="title"></slot>
31-
</span>
32-
<div class="flex-grow overflow-y-auto">
33-
<slot v-bind:params="params"></slot>
34-
</div>
35-
<div class="flex-shrink-0 flex justify-center items-center pt-4">
36-
<button class="vfm-btn" @click="$emit('confirm', close)">
37-
confirm
38-
</button>
39-
<button class="vfm-btn" @click="$emit('cancel', close)">
40-
cancel
41-
</button>
42-
</div>
43-
<button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
44-
<mdi-close></mdi-close>
45-
</button>
46-
</template>
29+
<span class="mr-8 text-2xl font-bold ">
30+
<slot name="title"></slot>
31+
</span>
32+
<div class="flex-grow overflow-y-auto">
33+
<slot v-bind:params="params"></slot>
34+
</div>
35+
<div class="flex-shrink-0 flex justify-center items-center pt-4">
36+
<button class="vfm-btn" @click="$emit('confirm', close)">confirm</button>
37+
<button class="vfm-btn" @click="$emit('cancel', close)">cancel</button>
38+
</div>
39+
<button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
40+
<mdi-close></mdi-close>
41+
</button>
4742
</vue-final-modal>
4843
</template>
4944
5045
<script>
5146
export default {
5247
name: 'VTailwindModal',
53-
inheritAttrs: false,
54-
methods: {
55-
close() {
56-
this.$emit('input', false)
57-
}
58-
}
48+
inheritAttrs: false
5949
}
6050
</script>
51+
6152
```
6253

6354
</show-code>

‎docs/content/zh-Hant/dynamic-modal.md‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ export default {
103103
```vue
104104
<template>
105105
<vue-final-modal
106+
v-slot="{ close }"
106107
v-bind="$attrs"
107108
classes="modal-container"
108109
content-class="modal-content"
@@ -113,22 +114,14 @@ export default {
113114
</button>
114115
<span class="modal__title">Hello, vue-final-modal</span>
115116
<div class="modal__content">
116-
<p>
117-
Vue Final Modal is a renderless, stackable, detachable and lightweight
118-
modal component.
119-
</p>
117+
<p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
120118
</div>
121119
</vue-final-modal>
122120
</template>
123121
124122
<script>
125123
export default {
126-
inheritAttrs: false,
127-
methods: {
128-
close() {
129-
this.$emit('input', false)
130-
}
131-
}
124+
inheritAttrs: false
132125
}
133126
</script>
134127

‎docs/content/zh-Hant/examples/recommend.md‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ position: 11
2020
```vue
2121
<template>
2222
<vue-final-modal
23+
v-slot="{ params, close }"
2324
v-bind="$attrs"
2425
classes="modal-container"
2526
content-class="modal-content"
@@ -29,7 +30,7 @@ position: 11
2930
<slot name="title"></slot>
3031
</span>
3132
<div class="modal__content">
32-
<slot></slot>
33+
<slot v-bind:params="params"></slot>
3334
</div>
3435
<div class="modal__action">
3536
<button class="vfm-btn" @click="$emit('confirm', close)">confirm</button>
@@ -44,12 +45,7 @@ position: 11
4445
<script>
4546
export default {
4647
name: 'VModal',
47-
inheritAttrs: false,
48-
methods: {
49-
close() {
50-
this.$emit('input', false)
51-
}
52-
}
48+
inheritAttrs: false
5349
}
5450
</script>
5551
@@ -99,6 +95,7 @@ export default {
9995
background-color: #1a202c;
10096
}
10197
</style>
98+
10299
```
103100

104101
</show-code>

0 commit comments

Comments
 (0)