vue遮罩层弹出框

弹出遮罩层，我这里的遮罩层和触发弹出的遮罩层的组件属于兄弟组件，这里，我利用第三方事件中心总线来传参

1.这里是遮罩层代码

<template>
  <div class="main" v-if="isShow">
    <div class="bgColor" @click.self="closeContact"></div>
    <div class="content">
        <!-- 这里写内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow:false,//控制遮罩层的显示也消失
    };
  },
  methods: {
    closeContact(){
      this.isShow = false;//关闭遮罩
    },
  },
  created(){
    this.$bus.$on("openDiv",e=>{//接收遮罩层弹出的指令
        this.isShow = e;
    })
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 500px;
  box-sizing: border-box;
  background-color: #fff!important;
  padding: 30px 0;
  position: fixed;
  top:160px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 101;
  > div {
    margin: 16px;
    display: flex;
    justify-content: space-between;
    .yourName {
      margin-right: 20px;
    }
  }
  h3,h4{
    margin-left: 16px;
  }
  h3{
    font-size:26px;
    font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
    font-weight:bold;
    color:rgba(0,0,0,1);
    line-height:33px;
  }
  h4{
    font-size:14px;
    font-family:MicrosoftYaHeiUI;
    color:rgba(0,0,0,1);
    line-height:18px;
  }
  .message {
    width: 93%;
    height: 107px;
  }
  .sendBtn {
    float: right;
    margin-right: 20px;
  }
}
.content:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.bgColor {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  filter: alpha(opacity=60);
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}
</style>

2.打开遮罩层（进行兄弟组件传参）

<template>
  <div class="main">
    <button type="primary" size="small" @click="open">打开遮罩层</button>
    <!-- 遮罩层 -->
    <add-freight></add-freight>
  </div>
</template>

<script>
export default {
    methods:{
        open(){
            this.$bus.$emit("openDiv",true);
        }
    },
};
</script>