vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件

一、需求描述

有些项目会频繁用到下图这种类型的遮罩弹框，最好的方法是封装为公共的组件，直接复用。

image.png

image.png

二、方法：

1、子组件：遮罩弹框通过父组件传参，来显示组件内容和样式。且"返回"、"确定"显示的个数也是取决于父组件的传参决定。

2、父组件点击事件：传参，决定子组件样式，且监控子组件的 “返回”、“确定” 事件，决定遮罩弹框的显示还是取消显示，以及下一步操作。

三、上代码

这里主要写一些方法，具体GitHub 会放在文章末尾

1、子组件的动态样式显示。

{ {alertDara.title}}

{ {alertDara.content}}

class="btn-back flex-con"

v-if="alertDara.btn[0]"

:style="{color:alertDara.btnColor[0]}"

@click="alertBackFn"