Skip to content

Commit 67a44bf

Browse files
hunterliu1003hunterliu1003
committed
docs: fix examples of Vue 3 syntax
1 parent c6833d4 commit 67a44bf

File tree

8 files changed

+50
-114
lines changed

8 files changed

+50
-114
lines changed

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

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -102,33 +102,20 @@ export default {
102102

103103
```vue
104104
<template>
105-
<vue-final-modal
106-
v-bind="$attrs"
107-
classes="modal-container"
108-
content-class="modal-content"
109-
v-on="$listeners"
110-
>
105+
<vue-final-modal v-slot="{ close }" v-bind="$attrs" classes="modal-container" content-class="modal-content">
111106
<button class="modal__close" @click="close">
112107
<mdi-close></mdi-close>
113108
</button>
114109
<span class="modal__title">Hello, vue-final-modal</span>
115110
<div class="modal__content">
116-
<p>
117-
Vue Final Modal is a renderless, stackable, detachable and lightweight
118-
modal component.
119-
</p>
111+
<p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
120112
</div>
121113
</vue-final-modal>
122114
</template>
123115
124116
<script>
125117
export default {
126-
inheritAttrs: false,
127-
methods: {
128-
close() {
129-
this.$emit('input', false)
130-
}
131-
}
118+
inheritAttrs: false
132119
}
133120
</script>
134121

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,12 @@ You can create a `higher-order component` easily and can customize `template`, `
1919

2020
```vue
2121
<template>
22-
<vue-final-modal
23-
v-bind="$attrs"
24-
classes="modal-container"
25-
content-class="modal-content"
26-
v-on="$listeners"
27-
>
22+
<vue-final-modal v-slot="{ params, close }" v-bind="$attrs" classes="modal-container" content-class="modal-content">
2823
<span class="modal__title">
2924
<slot name="title"></slot>
3025
</span>
3126
<div class="modal__content">
32-
<slot></slot>
27+
<slot :params="params"></slot>
3328
</div>
3429
<div class="modal__action">
3530
<button class="vfm-btn" @click="$emit('confirm', close)">confirm</button>
@@ -45,11 +40,7 @@ You can create a `higher-order component` easily and can customize `template`, `
4540
export default {
4641
name: 'VModal',
4742
inheritAttrs: false,
48-
methods: {
49-
close() {
50-
this.$emit('input', false)
51-
}
52-
}
43+
emits: ['confirm', 'cancel']
5344
}
5445
</script>
5546

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

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,42 +20,32 @@ 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"
26-
v-on="$listeners"
2727
>
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>
28+
<span class="mr-8 text-2xl font-bold">
29+
<slot name="title"></slot>
30+
</span>
31+
<div class="flex-grow overflow-y-auto">
32+
<slot :params="params"></slot>
33+
</div>
34+
<div class="flex-shrink-0 flex justify-center items-center pt-4">
35+
<button class="vfm-btn" @click="$emit('confirm', close)">confirm</button>
36+
<button class="vfm-btn" @click="$emit('cancel', close)">cancel</button>
37+
</div>
38+
<button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
39+
<mdi-close></mdi-close>
40+
</button>
4741
</vue-final-modal>
4842
</template>
4943
5044
<script>
5145
export default {
5246
name: 'VTailwindModal',
5347
inheritAttrs: false,
54-
methods: {
55-
close() {
56-
this.$emit('input', false)
57-
}
58-
}
48+
emits: ['cancel', 'confirm']
5949
}
6050
</script>
6151
```

‎docs/content/en/guide/scoped-slot.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ When you are using vue-final-modal as a HOC. you can `close` modal with scoped-s
1414

1515
```vue
1616
<template>
17-
<vue-final-modal v-slot="{ close }" v-bind="$attrs" v-on="$listeners">
17+
<vue-final-modal v-slot="{ close }" v-bind="$attrs">
1818
<div>Hello Vue Final Modal</div>
1919
<button @click="close">close modal</button>
2020
</vue-final-modal>

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

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -102,43 +102,30 @@ export default {
102102

103103
```vue
104104
<template>
105-
<vue-final-modal
106-
v-bind="$attrs"
107-
classes="modal-container"
108-
content-class="modal-content"
109-
v-on="$listeners"
110-
>
105+
<vue-final-modal v-slot="{ close }" v-bind="$attrs" classes="modal-container" content-class="modal-content">
111106
<button class="modal__close" @click="close">
112107
<mdi-close></mdi-close>
113108
</button>
114109
<span class="modal__title">Hello, vue-final-modal</span>
115110
<div class="modal__content">
116-
<p>
117-
Vue Final Modal is a renderless, stackable, detachable and lightweight
118-
modal component.
119-
</p>
111+
<p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
120112
</div>
121113
</vue-final-modal>
122114
</template>
123115
124116
<script>
125117
export default {
126-
inheritAttrs: false,
127-
methods: {
128-
close() {
129-
this.$emit('input', false)
130-
}
131-
}
118+
inheritAttrs: false
132119
}
133120
</script>
134121
135122
<style scoped>
136-
::v-deep .modal-container {
123+
::v-deep(.modal-container) {
137124
display: flex;
138125
justify-content: center;
139126
align-items: center;
140127
}
141-
::v-deep .modal-content {
128+
::v-deep(.modal-content) {
142129
position: relative;
143130
display: flex;
144131
flex-direction: column;
@@ -161,7 +148,7 @@ export default {
161148
</style>
162149
163150
<style scoped>
164-
.dark-mode div::v-deep .modal-content {
151+
.dark-mode div::v-deep(.modal-content) {
165152
border-color: #2d3748;
166153
background-color: #1a202c;
167154
}

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

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,12 @@ position: 11
1919

2020
```vue
2121
<template>
22-
<vue-final-modal
23-
v-bind="$attrs"
24-
classes="modal-container"
25-
content-class="modal-content"
26-
v-on="$listeners"
27-
>
22+
<vue-final-modal v-slot="{ params, close }" v-bind="$attrs" classes="modal-container" content-class="modal-content">
2823
<span class="modal__title">
2924
<slot name="title"></slot>
3025
</span>
3126
<div class="modal__content">
32-
<slot></slot>
27+
<slot :params="params"></slot>
3328
</div>
3429
<div class="modal__action">
3530
<button class="vfm-btn" @click="$emit('confirm', close)">confirm</button>
@@ -45,21 +40,17 @@ position: 11
4540
export default {
4641
name: 'VModal',
4742
inheritAttrs: false,
48-
methods: {
49-
close() {
50-
this.$emit('input', false)
51-
}
52-
}
43+
emits: ['confirm', 'cancel']
5344
}
5445
</script>
5546
5647
<style scoped>
57-
::v-deep .modal-container {
48+
::v-deep(.modal-container) {
5849
display: flex;
5950
justify-content: center;
6051
align-items: center;
6152
}
62-
::v-deep .modal-content {
53+
::v-deep(.modal-content) {
6354
position: relative;
6455
display: flex;
6556
flex-direction: column;
@@ -94,7 +85,7 @@ export default {
9485
</style>
9586
9687
<style scoped>
97-
.dark-mode div::v-deep .modal-content {
88+
.dark-mode div ::v-deep(.modal-content) {
9889
border-color: #2d3748;
9990
background-color: #1a202c;
10091
}

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

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,42 +20,32 @@ position: 10
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"
26-
v-on="$listeners"
2727
>
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>
28+
<span class="mr-8 text-2xl font-bold">
29+
<slot name="title"></slot>
30+
</span>
31+
<div class="flex-grow overflow-y-auto">
32+
<slot :params="params"></slot>
33+
</div>
34+
<div class="flex-shrink-0 flex justify-center items-center pt-4">
35+
<button class="vfm-btn" @click="$emit('confirm', close)">confirm</button>
36+
<button class="vfm-btn" @click="$emit('cancel', close)">cancel</button>
37+
</div>
38+
<button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
39+
<mdi-close></mdi-close>
40+
</button>
4741
</vue-final-modal>
4842
</template>
4943
5044
<script>
5145
export default {
5246
name: 'VTailwindModal',
5347
inheritAttrs: false,
54-
methods: {
55-
close() {
56-
this.$emit('input', false)
57-
}
58-
}
48+
emits: ['cancel', 'confirm']
5949
}
6050
</script>
6151
```

‎docs/content/zh-Hant/guide/scoped-slot.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ fullscreen: true
1414

1515
```vue
1616
<template>
17-
<vue-final-modal v-slot="{ close }" v-bind="$attrs" v-on="$listeners">
17+
<vue-final-modal v-slot="{ close }" v-bind="$attrs">
1818
<div>哈囉，Vue Final Modal</div>
1919
<button @click="close">close modal</button>
2020
</vue-final-modal>

0 commit comments

Comments
 (0)