proginn-frontend/components/credit/toastIndex.vue

<template>
  <section class="toastBox" @click="closeToast" v-if="!!type">
    <div class="toastArea">
      <div class="toastContent" @click.stop="()=>{}" ref="toastContent">
        <!--实名认证-->
        <realNameAuth v-if="type === 'openRealNameAuth'"/>
        <!--工作经历-->
        <workHistory v-if="type === 'openWorkHistory'" :dataInfo="dataInfo" :submitRefresh="submitRefresh"/>
        <!--最高学历认证-->
        <Education v-if="type === 'openEducation'" :dataInfo="dataInfo" :submitRefresh="submitRefresh"/>

        <i class="el-icon-close closeIcon" @click="closeToast"></i>
      </div>
    </div>
  </section>
</template>

<script>
  import realNameAuth from './toast/realNameAuth'
  import workHistory from './toast/workHistory'
  import Education from './toast/education'

  export default {
    components: { realNameAuth, workHistory, Education },
    props: {
      closeToast: {
        type: Function,
        required: true
      },
      type: {
        type: String,
        default: ''
      },
      dataInfo: {
        type: Object,
        default: function () {
          return {}
        }
      },
      submitRefresh: {
        type: Function,
        default: function () {

        }
      },
    },
    watch: {
      type: function () {
        console.log('typeChange', this.type)
        this.resizeFn()
      }
    },
    data() {
      return {
        mobile: this.$deviceType.isMobile()
      }
    },
    created() {

    },
    mounted() {
      this.resizeFn()
      window.onresize = this.resizeFn
    },
    methods: {
      resizeFn() {
        this.$nextTick(()=>{
          if (this.type) {
            let domContent = this.$refs.toastContent
            if (document.body.clientHeight - 50 <= domContent.clientHeight) {
              domContent.style.transform = `scale(${(document.body.clientHeight - 100)/domContent.clientHeight})`
              domContent.style.transformOrigin = `center`
            } else if (document.body.clientWidth - 50 <= domContent.clientWidth) {
              domContent.style.transform = `scale(${(document.body.clientWidth - 100)/domContent.clientWidth})`
              domContent.style.transformOrigin = `center`
            } else {
              domContent.style.transform = `scale(1)`
              domContent.style.transformOrigin = `center`
            }
          }
        })
      }
    },
  };
</script>

<style scoped lang="scss">
  .toastBox {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1010;
    background: rgba(0, 0, 0, 0.2);

    p {
      margin-bottom: 0;
    }

    .toastArea {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      .toastContent {
        position: absolute;
        min-width: 100px;
        min-height: 100px;
        background: rgba(255, 255, 255, 1);
        border-radius: 11px;
      }
      .closeIcon {
        position: absolute;
        right: 23px;
        top: 32px;
        width: 18px;
        height: 18px;
        color: #666666;
        font-size: 20px;
        font-weight: 600;
        transform: scale(1.2);
        transform-origin: center;
        cursor: pointer;
      }
    }
  }
</style>