封装函数式组件

**@TOC问题：项目中出现很多相似弹框，单纯引入vue文件组件就会显得代码冗余，vue文件

<template>
    <div>
        <el-dialog v-model="props.dialogVisible" title="Tips" width="30%" :before-close="handleClose">
            <span>This is a message</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        Confirm
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, defineProps } from 'vue';

let props = defineProps({
    title: {
        type: String,
        default: ''
    },
    content: {
        type: String,
        default: ''
    },
    btnContent: {
        type: String,
        default: ''
    },
    dialogVisible: {
        type: Boolean,
        default: false
    }
})
</script>

js文件

import { createApp } from "vue";
import dialog from "./dialog.vue";
const dialogs = options => {
  // 创建元素节点
  const rootNode = document.createElement("div");
  // 在body标签内部插入此元素
  document.body.appendChild(rootNode);
  // 创建应用实例（第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props）
  const app = createApp(dialog, {
    ...options,
    hide() {
      // 卸载已挂载的应用实例
      app.unmount();
      // 删除rootNode节点
      document.body.removeChild(rootNode);
    },
  });
  // 将应用实例挂载到创建的 DOM 元素上
  return app.mount(rootNode);
};
// 注册插件app.use()会自动执行install函数
// dialogs.install = app => {
//   // 注册全局属性，类似于 Vue2 的 Vue.prototype
//   app.config.globalProperties.$dialog = options => dialog(options).show();
// };


export default dialogs

然后在需要引入的文件内使用

import dialog from '@/components/dialog.js'
onMounted(() => {
    dialog({
        title:'12',
        dialogVisible:true
    })
    window.document.addEventListener("keypress", onkeypress);
});