该方案使用的场景。
后台项目中,弹窗风格样式统一。
每次写样式都很麻烦,那么就封装一个统一的
附代码
<template>
<div class="dialogDiv">
<el-dialog
v-model="dialogVisible"
:title="title"
:width="width"
:before-close="beforeClose"
:close-on-click-modal="false"
destroy-on-close
:show-close="showClose"
custom-class="commonDialog"
:close-icon="closeIcon"
>
<template #header>
<slot name="header" v-if="hasHeader"> </slot>
<div v-else>{{ title }}</div>
</template>
<slot />
<template #footer>
<slot name="footer" v-if="hasFooter"></slot>
<div v-else class="flex justify-center items-center">
<el-button
type="primary"
color="#395BED"
class="w-[70%]"
@click="submit"
>
提交
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref } from "vue";
import closeIcon from "./commonClose.vue";
const dialogVisible = ref(false);
const props = defineProps({
// 标题
title: {
type: String,
default: "",
},
width: {
type: String,
default: "500",
},
// 关闭前执行的方法
beforeClose: {
type: Function,
default: () => {
console.log("beforeClose");
},
},
// 是否展示关闭按钮
showClose: {
type: Boolean,
default: true,
},
// <!-- hasHeader :弹窗头:true: 需要自定义 false:不需要自定义,可以传入title -->
hasHeader: {
type: Boolean,
default: false,
},
// hasFooter 默认自定义底部按钮,false:不需要自定义,默认按钮,只有一个
hasFooter: {
type: Boolean,
default: false,
},
});
const onShow = () => {
dialogVisible.value = true;
};
const onClose = () => {
dialogVisible.value = false;
};
defineExpose({ onShow, onClose });
const emits = defineEmits(["submit"]);
const submit = () => {
emits("submit");
};
</script>
<style lang="scss" scoped>
.dialogDiv {
:deep(.el-dialog) {
// padding: 30px !important;
@apply px-[38px] py-[28px] rounded-2xl overflow-clip;
}
:deep(.el-dialog__close) {
@apply text-2xl;
}
:deep(.el-dialog__headerbtn) {
@apply hover:bg-[#EAEAEA];
}
}
</style>
外层必须要再嵌套一个div标签,否则样式不生效。
全局注册组件 main.js
main.js
import CommonDialog from "./components/commonDialog.vue";
app.component("CommonDialog", CommonDialog);
弹窗的使用
<template>
<div>
<el-button class="mb-[20px]" @click="openDialog">点击打开弹窗</el-button>
<CommonDialog
ref="commonDialog"
:beforeClose="beforeClose"
width="500px"
@submit="submitDialog"
>
content
</CommonDialog>
</div>
</template>
const commonDialog = ref(null);
// 打开弹窗
const openDialog = () => {
commonDialog.value.onShow();
};
// 关闭前的回调
const beforeClose = () => {
console.log("关闭前的回调");
// 关闭弹窗,必须要执行这一步,否则弹窗不会关闭
commonDialog.value.onClose();
};
// 如果不自定义底部的话,就要用emits 事件传递的方法,如果自定义,则直接写方法就可以
const submitDialog = () => {
console.log("submit");
beforeClose();
};
<script setup>
</script>
展示效果
内容可以自定义,我这里只写了一个content