Skip to content

Commit 522a97f

Browse files
hoorayhooray
committed
重构 useFaModal 和 useFaDrawer 
1 parent 59fb213 commit 522a97f

File tree

3 files changed

+118
-60
lines changed

3 files changed

+118
-60
lines changed

‎src/ui/components/FaDrawer/index.ts‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Component, HTMLAttributes } from 'vue'
2-
import { isVNode } from 'vue'
2+
import { createVNode, isVNode, render } from 'vue'
33
import Drawer from './index.vue'
44

55
export interface DrawerProps {
@@ -59,36 +59,49 @@ export function useFaDrawer() {
5959
const container = document.createElement('div')
6060
const visible = ref(false)
6161
const options = reactive({ ...initialOptions })
62-
const app = createApp({
63-
render() {
64-
return h(Drawer, Object.assign({
65-
'id': useId(),
66-
'modelValue': visible.value,
67-
'onUpdate:modelValue': (val: boolean) => {
68-
visible.value = val
69-
},
70-
}, options), {
71-
default: () => {
72-
if (typeof options.content === 'string') {
73-
return options.content
74-
}
75-
else if (isVNode(options.content)) {
76-
return options.content
77-
}
78-
else if (options.content) {
79-
return h(options.content)
80-
}
81-
return null
82-
},
83-
})
84-
},
85-
})
86-
// 继承主应用的上下文
8762
const instance = getCurrentInstance()
88-
if (instance && instance.appContext) {
89-
Object.assign(app._context, instance.appContext)
63+
let vnode: VNode | null = null
64+
65+
const updateVNode = () => {
66+
vnode = createVNode(Drawer, Object.assign({
67+
'id': instance && instance.uid ? `FaDrawer-${instance.uid}` : undefined,
68+
'modelValue': visible.value,
69+
'onUpdate:modelValue': (val: boolean) => {
70+
visible.value = val
71+
},
72+
...options,
73+
}), {
74+
default: () => {
75+
if (typeof options.content === 'string') {
76+
return options.content
77+
}
78+
else if (isVNode(options.content)) {
79+
return options.content
80+
}
81+
else if (options.content) {
82+
return h(options.content)
83+
}
84+
return null
85+
},
86+
})
87+
// 继承主应用的上下文
88+
if (instance && instance.appContext) {
89+
vnode.appContext = instance.appContext
90+
}
91+
render(vnode, container)
9092
}
91-
app.mount(container)
93+
94+
// 监听 visible 和 options 变化，自动重新渲染
95+
watch([visible, options], () => {
96+
updateVNode()
97+
}, {
98+
immediate: true,
99+
deep: true,
100+
})
101+
102+
// 挂载到当前实例
103+
instance?.proxy?.$el?.appendChild(container)
104+
92105
const open = () => {
93106
visible.value = true
94107
}

‎src/ui/components/FaModal/index.ts‎

Lines changed: 46 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Component, HTMLAttributes } from 'vue'
2-
import { isVNode } from 'vue'
2+
import { createVNode, isVNode, render } from 'vue'
33
import Modal from './index.vue'
44

55
export interface ModalProps {
@@ -67,36 +67,49 @@ export function useFaModal() {
6767
const container = document.createElement('div')
6868
const visible = ref(false)
6969
const options = reactive({ ...initialOptions })
70-
const app = createApp({
71-
render() {
72-
return h(Modal, Object.assign({
73-
'id': useId(),
74-
'modelValue': visible.value,
75-
'onUpdate:modelValue': (val: boolean) => {
76-
visible.value = val
77-
},
78-
}, options), {
79-
default: () => {
80-
if (typeof options.content === 'string') {
81-
return options.content
82-
}
83-
else if (isVNode(options.content)) {
84-
return options.content
85-
}
86-
else if (options.content) {
87-
return h(options.content)
88-
}
89-
return null
90-
},
91-
})
92-
},
93-
})
94-
// 继承主应用的上下文
9570
const instance = getCurrentInstance()
96-
if (instance && instance.appContext) {
97-
Object.assign(app._context, instance.appContext)
71+
let vnode: VNode | null = null
72+
73+
const updateVNode = () => {
74+
vnode = createVNode(Modal, Object.assign({
75+
'id': instance && instance.uid ? `FaModal-${instance.uid}` : undefined,
76+
'modelValue': visible.value,
77+
'onUpdate:modelValue': (val: boolean) => {
78+
visible.value = val
79+
},
80+
...options,
81+
}), {
82+
default: () => {
83+
if (typeof options.content === 'string') {
84+
return options.content
85+
}
86+
else if (isVNode(options.content)) {
87+
return options.content
88+
}
89+
else if (options.content) {
90+
return h(options.content)
91+
}
92+
return null
93+
},
94+
})
95+
// 继承主应用的上下文
96+
if (instance && instance.appContext) {
97+
vnode.appContext = instance.appContext
98+
}
99+
render(vnode, container)
98100
}
99-
app.mount(container)
101+
102+
// 监听 visible 和 options 变化，自动重新渲染
103+
watch([visible, options], () => {
104+
updateVNode()
105+
}, {
106+
immediate: true,
107+
deep: true,
108+
})
109+
110+
// 挂载到当前实例
111+
instance?.proxy?.$el?.appendChild(container)
112+
100113
const open = () => {
101114
visible.value = true
102115
}
@@ -179,8 +192,11 @@ export function useFaModal() {
179192
contentClass: 'py-0 min-h-auto',
180193
footerClass: 'p-4',
181194
}
182-
const { open } = create(Object.assign(defaultOptions, options))
195+
const { open, update } = create(Object.assign(defaultOptions, options))
183196
open()
197+
return {
198+
update,
199+
}
184200
}
185201
return {
186202
create,

‎src/views/component_built_in_example/modal.vue‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,33 @@ function showModalConfirm() {
8787
},
8888
})
8989
}
90-
90+
function showModalDoubleConfirm() {
91+
const { update } = useFaModal().confirm({
92+
title: '温馨提醒',
93+
content: '这是 confirm 弹窗',
94+
beforeClose: (action, done) => {
95+
if (action === 'confirm') {
96+
update({
97+
title: '二次确认',
98+
content: '确定要关闭吗？',
99+
confirmButtonText: '我确定',
100+
cancelButtonText: '我取消',
101+
beforeClose: (action) => {
102+
if (action === 'confirm') {
103+
done()
104+
}
105+
else {
106+
done()
107+
}
108+
},
109+
})
110+
}
111+
else {
112+
done()
113+
}
114+
},
115+
})
116+
}
91117
function showModalPromiseConfirm() {
92118
useFaModal().confirm({
93119
title: '温馨提醒',
@@ -201,6 +227,9 @@ const { open: open2 } = useFaModal().create({
201227
<FaButton @click="showModalConfirm">
202228
Confirm
203229
</FaButton>
230+
<FaButton @click="showModalDoubleConfirm">
231+
Double Confirm
232+
</FaButton>
204233
<FaButton @click="showModalPromiseConfirm">
205234
Confirm with promise
206235
</FaButton>

0 commit comments

Comments
 (0)