利用Vue3封装一个弹框组件简单吗

目录

• 总结放前面：
• 🌲🌲 前言：
• 🍬🍬公共🍬🍬
• 🍬🍬全局🍬🍬
• 🍬🍬弹框🍬🍬
• 🎉🎉🎉结语：

<template>
    <Mask @click="close" /> // 蒙板层
    <div class="modal_all" v-if="visible">
        <slot name="header"> // 方便页面增加定制头部
            <div class="modal_header">
                <p class="modal_header_title">{{ title }}</p>
                <p class="modal_header_img" @click="close"></p>
            </div>
        </slot>
        <div class="modal_content">
            <slot></slot> // 开放弹框内容使用
        </div>
    </div>
</template>
<script lang="ts" setup>
defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
    },
});
const emit = defineEmits(['update:visible']);
const close = () => {
    emit('update:visible', false);
};
</script>
// 样式省略

import Modal from './Modal/Modal.vue';
import Mask from './Modal/Mask.vue';
// 在script setup不能写name，所以在这里加一个
const coms = [
  {
    name: 'Modal', // 使用组件的名称
    compent: Modal,
  },
  {
    name: 'Mask',
    compent: Mask,
  },
];
export default {
  install: (app) => {
    coms.forEach((item) => {
      app.component(item.name, item.compent);
    });
  },
};
// main.ts
import Common from './common/index';
const app = createApp(App);
app.use(Common);

<teleport to="#mask_modal" v-if="visible">
    <div class="modal_cent">
        <Mask @click="close" />
            <div class="modal_all">
                <slot name="header">
                    <div class="header">
                        <p class="header_title">{{ title }}</p>
                        <p class="header_img" @click="close"></p>
                    </div>
                </slot>
            <div>
            <slot></slot>
            </div>
        </div>
    </div>
</teleport>