使用vue3的h()和reader()封装通用弹窗组件

好的，下面是使用 Vue 3 的 `h()` 和 `render()` 封装通用弹窗组件的示例代码。

<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()` 方法来渲染弹窗组件。