一个简单的基于element 的弹窗，自定义风格样式，内附图片

该方案使用的场景。

后台项目中，弹窗风格样式统一。

每次写样式都很麻烦，那么就封装一个统一的

附代码

外层必须要再嵌套一个 div 标签，否则样式不生效。

全局注册组件 main.js

main.js

import CommonDialog from "./components/commonDialog.vue";

app.component("CommonDialog", CommonDialog);

弹窗的使用

const commonDialog = ref(null);
// 打开弹窗
const openDialog = () => {commonDialog.value.onShow();
};

// 关闭前的回调
const beforeClose = () => {console.log("关闭前的回调");
// 关闭弹窗，必须要执行这一步，否则弹窗不会关闭
  commonDialog.value.onClose();};

// 如果不自定义底部的话，就要用 emits 事件传递的方法，如果自定义，则直接写方法就可以
const submitDialog = () => {console.log("submit");
  beforeClose();};

展示效果

内容可以自定义，我这里只写了一个 content