一、需求描述

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

image.png image.png

二、方法：

1、子组件：遮罩弹框通过父组件传参，来显示组件内容和样式。且"返回"、"确定"显示的个数也是取决于父组件的传参决定。
2、父组件点击事件：传参，决定子组件样式，且监控子组件的 “返回”、“确定” 事件，决定遮罩弹框的显示还是取消显示，以及下一步操作。

三、上代码

这里主要写一些方法，具体代码地址会放在文章末尾

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

 <div id="alert" class="flex-con" v-if="alertDara"> 
      <div class="con">
        <div class="title" :style="{color:alertDara.titleColor}">{{alertDara.title}}</div>
        <div class="content" :style="{color:alertDara.contentColor}">{{alertDara.content}}</div>
        <div class="btn">
          <div
            class="btn-back flex-con"
            v-if="alertDara.btn[0]"
            :style="{color:alertDara.btnColor[0]}"
            @click="alertBackFn"
          >{{alertDara.btn[0]}}</div>
          <div
            class="btn-sure flex-con"
            v-if="alertDara.btn[1]"
            :style="{color:alertDara.btnColor[1]}"
            @click="alertSureFn"
          >{{alertDara.btn[1]}}</div>
        </div>
      </div>
    </div>

注：这里的 btn 和 btnColor 必须传两个值，否则会报错。不想显示的可以传 ""

  data() {
    return {
      alertDara: {
        title: "启动五谷模式",
        titleColor: "pink",
        content: "设备已经是启动模式，为了保障安全，请在设备机上点击启动按钮。",
        contentColor: "gray",
        btn: ["返回", ""],
        btnColor: ["", ""]
      }
    };
  },

2、父组件 通过 props 传参，来决定子组件的样式

props 传参方法可以看我之前的文章：https://www.jianshu.com/p/d0cc6eb0226e

<public v-if="alertDara" :alertDara="alertDara" ></public>

---

三、难点：父组件监控子组件事件

1、父组件

自定义事件属性：alertBack,事件名：alertBackFn

<public v-if="alertDara" 
    :alertDara="alertDara" @alertBack="alertBackFn" @alertSure="alertSureFn"></public>

2、子组件：

在事件中，用 this.$emit 方法，将自己的事件监听传给父亲。

alertBackFn:function(){
      this.$emit('alertBack', '这是子组件传递的消息');
 },

所有代码地址：https://github.com/caoguoli/vue-maskALert

附：见下图

各位亲爱的客官们，我实在不知道如何在mackDown 上传图片的时候，将多个图片在一行显示，有知道方法的大神们，请告诉我哈。

image.png