在Vue项目中，弹框是一个常用的组件，而且在同一个项目中，弹框通常具有相似的特性。因此，我们可以将其抽离封装为一个通用的弹框组件。
由于Vue3向下兼容，因此本文将使用Vue2的写法，但Vue3的写法也大同小异。
第一步：新建相关文件
一般来说，我们可以在
src/components/dialog
目录下新建以下两个文件：
- index.vue：该文件用于书写弹框组件的结构、样式和动态逻辑；
- index.js：该文件使用虚拟节点创建组件内容，并注册组件。
第二步：书写组件内容
index.vue组件内容如下：
（结构 + js 代码）
（代码内容）结构说明：
-
.default-message：整个弹框的容器，一般宽高都设置为100%，并具有半透明的背景色，覆盖页面内容，防止弹框出现时仍能操作页面； -
.default-message-content：整个弹框的内容区域，包括标题、提示信息、取消按钮和确定按钮； - 取消按钮和确定按钮支持执行传入的事件，方便在弹框弹出后点击按钮执行相应操作；
（样式）
（样式内容）第三步：注册成全局组件
（代码内容）到这里，我们的弹框组件就完成了，接下来我们来使用看看。
项目中使用弹框
使用方法非常简单，所见即所得。
（代码内容）说明：
-
标题、提示文案、以及取消和确定按钮文案直接传入；
ok_function是确定按钮的回调，可以在这里执行任何点击确定后想做的事，包括发送请求和异步操作；cancel_function同理。 - 弹框图片示例：
写在后面
这是一个比较基础的弹框组件，示例代码比较全面，对细节要求不大的小伙伴可以直接使用；背景颜色、字体、布局等这些细节，因为每个业务场景不同，可以根据需要适当调整；弹框是固定单位的，如果项目需要使用响应式大小，直接对应替换大小单位即可；如果本文对您有帮助，请关注作者，您的支持是我不断更新的动力！Peace and love~~
标签：游戏攻略
