vue el-dialog通用弹窗 高度设置好的弹窗

// --------------------父组件
<template>
  <div>
    <el-button @click="popupStatus = true">打开弹窗</el-button>
    <Popup :popupStatus="popupStatus" :loading="sonLoading" title="标" @popupStatusFn="popupStatusFn"></Popup>
  </div>
</template>

<script>
import Popup from './Popup'
export default {
  data() {
    return {
      popupStatus: false,
      sonLoading:false
    }
  },
  components: {
    Popup
  },
  methods: {
    popupStatusFn(data) {
      data === 'false' ? (this.popupStatus = false) : (this.popupStatus = true)
    }
  }
}
</script>

<style lang="less" scoped></style>

---------------弹窗-----------------------

<template>
  <div class="pop-up">
    <el-dialog :title="title" :visible.sync="state" :before-close="handleClose">
      <div class="main" v-loading="loading"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    popupStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      state: false
    }
  },
  watch: {
    popupStatus(oldVal, newVal) {
      this.state = this.popupStatus
    }
  },
  methods: {
    handleClose() {
      this.$emit('popupStatusFn', 'false')
    }
  }
}
</script>

<style lang="less" scoped>
.pop-up {
  .main {
    height: 60vh;
    background: #9f9;
    overflow: auto;
  }
}
</style>