一、需求描述
有些项目会频繁用到下图这种类型的遮罩弹框，最好的方法是封装为公共的组件，直接复用。
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"
>{{alertDara.btn[0]}}
class="btn-sure flex-con"
v-if="alertDara.btn[1]"
:style="{color:alertDara.btnColor[1]}"
@click="alertSureFn"
>{{alertDara.btn[1]}}
注：这里的 btn 和 btnColor 必须传两个值，否则会报错。不想显示的可以传 ""
data() {
return {
alertDara: {
title: "启动五谷模式",
titleColor: "pink",
content: "设备已经是启动模式，为了保障安全，请在设备机上点击启动按钮。",
contentColor: "gray",
btn: ["返回", ""],
btnColor: ["", ""]
}
};
},
2、父组件 通过 props 传参，来决定子组件的样式
三、难点：父组件监控子组件事件
1、父组件
自定义事件属性：alertBack,事件名：alertBackFn
注意：主要是在父组件中 通过 alertSure 定义监听参数，在子组件通过 this.$emit('alertBack') 传递子组件事件。对于父组件、子组件的事件名，可以随意。【我老是入这个坑】
:alertDara="alertDara" @alertBack="alertBackFn" @alertSure="alertSureFn">
2、子组件：
在事件中，用 this.$emit 方法，将自己的事件监听传给父亲。
alertBackFn:function(){
this.$emit('alertBack', '这是子组件传递的消息');
},
a.png
附：见下图
各位亲爱的客官们，我实在不知道如何在mackDown 上传图片的时候，将多个图片在一行显示，有知道方法的大神们，请告诉我哈。
image.png
