vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程

<template>
  <el-dialog
    v-model="dialogTableVisible"
    :title="title"
    :width="width"
    :top="top"
    :custom-class="customClass"
    :style="{ maxWidth: width, minWidth: width }"
    destroy-on-close
    align-center
    append-to-body
  >
    <slot name="dialog" />
  </el-dialog>
  <!-- 定义一个 @click 事件监听器来绑定点击事件到组件的 showDialog 方法上。 -->
  <div style="cursor: pointer" @click="showDialog">
    <!-- slot可以可以包裹在父组件要设置点击事件的标签外层 ，来实现父组件内调起弹窗-->
    <slot />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
defineProps({
  title: String,
  width: [String, Number],
  customClass: String,
  top: [String, Number],
});
const dialogTableVisible = ref(false);
const showDialog = () => {
  dialogTableVisible.value = true;
};
</script>
<style scoped lang="scss">
</style>

export { default as Dialogone } from './one.vue';
export { default as Dialogtwo} from './two.vue';
export { default as DialogFancyButton} from './fancyButton.vue';
export { default as TableList} from '@/views/elementPlus/tableList.vue';

<template>
  <!-- 弹窗 -->
  <Dialogone title="表格详情" width="700px" :dialogTableVisible="true">
    <!-- 使用插槽向固定位置输出内容 #是v-slot简写，这个SleFone要与父组件使用时候<template #SleFone>一致-->
    <slot name="SleFone"> </slot>
    <template #dialog>
      <TableList v-if="type==='1'"></TableList>
      <CarouselOne v-if="type==='2'"></CarouselOne>
    </template>
  </Dialogone>
</template>
<script setup lang="ts">
import { Dialogone } from "../../../components/index";
//这里我随便拿了两个页面做组件使用，
import { TableList } from "../../../components/index";
import { CarouselOne } from "../../../components/index";
defineProps({
  type: String,
});
</script>
<style scoped lang="scss">
</style>

import { App } from 'vue';
import {SleFone} from './index';
// 创建一个 install 函数，接收 Vue 应用实例作为参数
const install = (app: App) => {
    // 在 Vue 应用实例中注册 SleFone 组件
    app.component('SleFone', SleFone);
    // 在这里可以注册其他全局组件
    // app.component('AnotherComponent', AnotherComponent);
  };
  // 导出 install 函数
  export default { install };

//自定义组件
import GlobalComponents from './components/GlobalComponents';
const app = createApp(App)
app.use(GlobalComponents);
app.mount('#app');

 <SleFone type="1">
          <template #SleFone>
          //一下内容可以自定义
            <el-button
              link
              type="primary"
              size="small"
              @click="detailsClick(scope.row)"
            >
              点击唤起弹窗
            </el-button>
            </template>
            </SleFone>

 <button type="submit">
  <slot name="SleFone2">
    Submit <!-- 默认内容 -->
  </slot>
</button>

      <template #SleFone2>
          <span>新内容</span> 
        </template>