vue3后台管理系统封装的弹窗组件

**Vue3 后台管理系统封装的弹窗组件**

在 Vue3 的项目中，弹窗是非常常见的 UI 组件之一。它可以用于提示用户、显示错误信息、确认操作等场景。在本文中，我们将介绍如何封装一个高效、易用的弹窗组件。

**组件名称：ElDialog**

我们将这个弹窗组件命名为 `ElDialog`，以便于与其他 Element UI 组件区分开来。

**组件结构**

`ElDialog` 组件的结构如下：

html<template>
 <div class="el-dialog" :class="{ 'is-visible': visible }">
 <!-- 弹窗内容区域 -->
 <slot name="content"></slot>

 <!-- 弹窗底部区域 -->
 <div class="el-dialog__footer">
 <!-- 确定按钮 -->
 <button type="button" @click="handleConfirm">确定</button>
 <!-- 取消按钮 -->
 <button type="button" @click="handleCancel">取消</button>
 </div>

 <!-- 弹窗头部区域 -->
 <div class="el-dialog__header">
 <!-- 标题 -->
 <h2>{{ title }}</h2>
 <!-- 关闭按钮 -->
 <button type="button" @click="handleClose">关闭</button>
 </div>
 </div>
</template>

<script>
export default {
 name: 'ElDialog',
 props: {
 // 弹窗标题 title: {
 type: String,
 default: ''
 },
 // 弹窗内容 content: {
 type: String,
 default: ''
 },
 // 弹窗是否可见 visible: {
 type: Boolean,
 default: false }
 },
 methods: {
 // 确定按钮点击事件 handleConfirm() {
 this.$emit('confirm');
 },
 // 取消按钮点击事件 handleCancel() {
 this.$emit('cancel');
 },
 // 关闭按钮点击事件 handleClose() {
 this.visible = false;
 }
 }
}
</script>

<style scoped>
.el-dialog {
 position: fixed;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 background-color: #fff;
 border-radius:10px;
 padding:20px;
 box-shadow:0010px rgba(0,0,0,0.2);
}

.el-dialog__footer {
 display: flex;
 justify-content: space-between;
 margin-top:20px;
}

.el-dialog__header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom:20px;
}
</style>

html<template>
 <div>
 <!-- 弹窗按钮 -->
 <button type="button" @click="handleShowDialog">显示弹窗</button>

 <!-- 弹窗内容区域 -->
 <el-dialog v-model="dialogVisible">
 <h2>标题</h2>
 <p>内容</p>
 <div class="el-dialog__footer">
 <button type="button" @click="handleConfirm">确定</button>
 <button type="button" @click="handleCancel">取消</button>
 </div>
 </el-dialog>
 </div>
</template>

<script>
import ElDialog from './ElDialog.vue';

export default {
 name: 'App',
 components: { ElDialog },
 data() {
 return {
 dialogVisible: false };
 },
 methods: {
 handleShowDialog() {
 this.dialogVisible = true;
 }
 }
}
</script>