自己造messagebox轮子

父组件中：

import floatBox from '../messageBox'

? ? ? ? ? ? data里加参数alertBox: '0',

????????????????method中

?

changeAlertBox() {

? ? ? if (this.alertBox === '0') {

? ? ? ? this.alertBox = '1'

? ? ? ? this.$refs.floatBox.changeAlertBox()

? ? ? } else {

? ? ? ? this.alertBox = '0'

? ? ? ? this.$refs.floatBox.changeAlertBox()

? ? ? }

? ? ? console.log('父组件中的', this.alertBox)

? ? },

? ? changeFatherBox() {

? ? ? if (this.alertBox === '0') {

? ? ? ? this.alertBox = '1'

? ? ? } else {

? ? ? ? this.alertBox = '0'

? ? ? }

? ? }

?

 components: {
    floatBox
  }

????????????????????????????????????????

?

import floatBox from '../messageBox'

<floatBox ref="floatBox" :alertBox="changeChildBox"></floatBox>

子组件中：

<template>
  <div v-if="alertBox === '1'" class="alert_box" @click="hidden">
    <div @click.stop="" class="contentBox">
      <div class="title">
        <div>培训审批</div>
        <div @click="changeAlertBox">×</div>
      </div>
      <div class="text">请选择是否同意</div>
      <div class="btn">
        <el-button type="primary">同意报名</el-button>
        <el-button type="primary" plain>不同意报名</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: { alertBox: { type: String, default: '0' } },
  methods: {
    hidden() {
      this.alertBox = '0'
    },
    changeAlertBox() {
      if (this.alertBox === '0') {
        this.alertBox = '1'
        this.$emit('alertBox', this.alertBox)
      } else {
        this.alertBox = '0'
        this.$emit('alertBox', this.alertBox)
      }
      console.log('子组件中的', this.alertBox)
    }
  },
  created() {}
}
</script>

<style lang="less" scoped>
.alert_box {
  position: fixed;
  z-index: 2002;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .contentBox {
    width: 600px;
    height: 200px;
    background: #ffffff;
    box-shadow: 0 5px 5px -3px #0000001a, 0 8px 10px 1px #0000000f,
      0 3px 14px 2px #0000000d;
    .title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      height: 56px;
      background: #ffffff;
      padding: 0px 14px;
      font-weight: 600;
      font-size: 16px;
      color: #000000e6;
      line-height: 24px;
      border-bottom: 1px solid #e7e7e7;
    }
    .text {
      display: flex;
      flex-direction: row;
      padding: 0px 15px;
      align-items: center;
      height: 86px;
      font-weight: 400;
      font-size: 16px;
      color: #000000e6;
      border-bottom: 1px solid #e7e7e7;
    }
    .btn {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 600px;
      height: 56px;
    }
  }
}
</style>