用vue3 el-dialog 封装一个全局的函数式组件

要封装一个全局的函数式组件，你可以遵循以下步骤：

1. 在 `src` 目录下创建一个新的文件夹，例如 `components`，并在该文件夹中创建一个名为 `ElDialog.vue` 的文件。

2. 在 `ElDialog.vue` 文件中编写组件的代码，如下所示：

<template>
  <div v-if="visible" class="el-dialog">
    <h2 class="el-dialog-title">{{ title }}</h2>
    <p class="el-dialog-content">{{ content }}</p>
    <!-- 其他内容... -->
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'ElDialog',
  props: {
    title: String,
    content: String,
    // 其他 props...
  },
  setup(props) {
    const visible = reactive({ value: false });

    return {
      visible,
    };
  },
});
</script>

<style scoped>
.el-dialog {
  /* 样式定义 */
}

.el-dialog-title {
  /* 样式定义 */
}

.el-dialog-content {
  /* 样式定义 */
}
</style>

在上述代码中，我们使用了 `reactive` 函数来创建响应式数据 `visible`，用于控制组件的显示与隐藏。通过在父组件中修改 `visible.value` 的值，可以控制 `el-dialog` 的显示状态。

3. 在 `src` 目录下创建一个名为 `main.js` 的文件，并在其中注册全局的函数式组件：

import { createApp } from 'vue';
import ElDialog from './components/ElDialog.vue';

const app = createApp();

app.component('el-dialog', ElDialog);

app.mount('#app');

在上述代码中，我们使用 `app.component` 方法来注册 `el-dialog` 组件为全局组件。这样，在你的应用程序的任何地方，你都可以使用 `<el-dialog>` 标签来引用该组件。

4. 在你的应用程序的主入口文件中，例如 `App.vue`，使用 `<el-dialog>` 标签来调用该组件：

<template>
  <div id="app">
    <!-- 其他内容... -->
    <el-dialog title="对话框标题" content="对话框内容"></el-dialog>
  </div>
</template>

<script>
export default {
  // 组件的逻辑...
};
</script>

<style>
/* 样式定义... */
</style>

现在，你就可以在整个应用程序中使用 `<el-dialog>` 标签，并传递所需的属性来显示全局的函数式组件了。

请注意，以上示例只是一个简单的演示，你可以根据实际需求进行更复杂的组件逻辑和样式定义。同时，也可以根据项目的具体情况，在全局注册组件时使用其他的标签名。