好的，下面是使用 Vue 3 的 `h()` 和 `render()` 封装
通用弹窗组件的示例
代码。
```
javascript
<template>
<div>
<button @click="showDialog = true">打开
弹窗</button>
<div v-if="showDialog">
<div class="mask" @click="showDialog = false"></div>
<div class="dialog">
<div class="title">{{ title }}</div>
<div class="content">{{ content }}</div>
<div class="buttons">
<button @click="onConfirm">确认</button>
<button @click="onCancel">取消</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { h, reactive, ref, onMounted } from 'vue'
export default {
setup() {
const state = reactive({
showDialog: false,
title: '提示',
content: '确认执行此操作吗？',
onConfirm: () => {},
onCancel: () => {}
})
const dialog = ref(null)
onMounted(() => {
// 监听键盘事件，使 ESC 键关闭
弹窗
document.addEventListener('keydown', (e) => {
if (e.keyCode === 27) {
state.showDialog = false
}
})
})
const handleClose = () => {
state.showDialog = false
}
const handleConfirm = () => {
state.onConfirm()
handleClose()
}
const handleCancel = () => {
state.onCancel()
handleClose()
}
const renderDialog = () => {
const title = h('div', { class: 'title' }, state.title)
const content = h('div', { class: 'content' }, state.content)
const buttons = h('div', { class: 'buttons' }, [
h('button', { onClick: handleConfirm }, '确认'),
h('button', { onClick: handleCancel }, '取消')
])
const dialog = h(
'div',
{ class: 'dialog', ref: dialog },
[title, content, buttons]
)
const mask = h('div', { class: 'mask', onClick: handleClose })
return h('div', { class: 'dialog-wrapper' }, [mask, dialog])
}
return {
showDialog: state.showDialog,
title: state.title,
content: state.content,
onConfirm: state.onConfirm,
onCancel: state.onCancel,
handleClose,
handleConfirm,
handleCancel,
renderDialog
}
},
render() {
return this.renderDialog()
}
}
</script>
<style>
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
text-align: center;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.content {
font-size: 14px;
margin-bottom: 20px;
}
.buttons {
display: flex;
justify-content: center;
}
button {
padding: 8px 20px;
margin: 0 10px;
font-size: 14px;
border-radius: 4px;
background-color: #eee;
border: none;
outline: none;
cursor: pointer;
}
</style>
```
在上面的
代码中，我们使用了 `reactive()` 函数创建了一个响应式对象 `state`，其中包含了
弹窗的状态、标题、内容以及确定和取消按钮的回调函数。我们还使用了 `ref()` 函数创建了一个
弹窗的引用 `dialog`，以便在 `render()` 函数中获取
弹窗的 DOM 元素。
在 `onMounted()` 钩子函数中，我们监听了键盘事件，当按下 ESC 键时，关闭
弹窗。
接下来，我们定义了三个方法：`handleClose()`、`handleConfirm()` 和 `handleCancel()`，分别用于关闭
弹窗、执行确定按钮的回调函数以及执行取消按钮的回调函数。
最后，我们使用了 `render()` 函数来渲染
弹窗组件。在 `renderDialog()` 方法中，我们使用了 `h()` 函数创建了
弹窗的各个子元素，并将它们放入一个组件容器中。注意，我们在
弹窗的容器元素中使用了 `ref` 属性来获取
弹窗的 DOM 元素，并将其赋值给 `dialog` 引用。
最后，在 `render()` 函数中，我们调用了 `renderDialog()` 方法来渲染
弹窗组件。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
