[Vue3]封装一个弹窗,A组件和B组件打开时内容不同

1.封装公共弹窗组件(Box.vue),利用具名插槽占位

<template>
    <Teleport to="body">
        <slot name="table"></slot>
        <slot name="inform"></slot>
    </Teleport>
</template>

<script setup lang="ts"></script>
<style scoped></style>

2.分别实现A组件以及B组件

①A组件(Inform.vue)

<template>
    <el-button @click="changeInform()">点击查看信息</el-button>
    <Box>
        <template v-slot:inform>
            <div class="modal" v-show="isShow">
                <el-form :model="form" label-width="auto" style="max-width: 300px">
                    <el-form-item label="姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="form.sex" placeholder="请选择你的性别">
                            <el-option label="男" value="man"></el-option>
                            <el-option label="女" value="women"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onsubmit">提交</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </Box>
</template>
<script setup lang="ts" name="Inform">
import Box from "./Box.vue";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
let isShow = ref(false);
let form = reactive({
    name: "",
    phone: "",
    sex: "",
});
function changeInform() {
    if (!isShow.value) {
        isShow.value = true;
    } else {
        isShow.value = false;
    }
}
function onsubmit() {
    ElMessage("提交");
}
function cancel() {
    isShow.value = false;
}

</script>
<style scoped>
.modal {
    padding: 3px;
    background-color: pink;
    border: 1px solid gray;
    border-radius: 10px;
    position: fixed;
    top: 50px;
    left: 50%;
}
.el-form {
    padding: 5px;
}
.el-form-item .el-button {
    margin-left: 18%;
}
</style>

②B组件(Table.vue)，以下直接使用ElementPlus表格内容

<template>
    <el-button @click="changeTable">点击查看表格</el-button>
    <Box>
        <template v-slot:table>
            <div class="table" v-show="isShow">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="Date" width="180" />
                    <el-table-column prop="name" label="Name" width="180" />
                    <el-table-column prop="address" label="Address" />
                </el-table>
            </div>
        </template>
    </Box>
</template>
<script setup lang="ts" name="Table">
import { ref, reactive } from "vue";
import Box from "./Box.vue";
let isShow = ref(false);
let tableData = reactive([
    {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
]);
function changeTable() {
    if (!isShow.value) {
        isShow.value = true;
    } else {
        isShow.value = false;
    }
}
</script>
<style scoped>
.table {
    width: 500px;
}
</style>

简单实现效果：（主要是自己离职面试简单练手）