定制化弹出层

以element-plus(dialog)为例（其他组件库同理）

<!-- overlay.vue -->
<script setup>
import { defineEmits, defineProps } from 'vue-demi'
import { useOverlay } from '@overlays/vue'
const props = defineProps({
  title: String,
})

const { visible, resolve, reject } = useOverlay({
  duration: 1000
})
</script>

<template>
  <el-dialog v-model="visible" :title="title" @close="reject()">
    <!-- 你的定制化内容 -->
    <button @click="resolve(`${title}:confirmed`)" />
  </el-dialog>
</template>

import { defineOverlay } from '@overlays/vue'
import OverlayComponent from './overlay.vue'

const callback = defineOverlay(OverlayComponent)
const value = await callback({ title: 'myElDialog' })
// value === "myElDialog:confirmed"