vue开发需要一个弹窗，用的地方比较多，为了避免后期调整，将其抽离出来封装成一个组件，方便后期复用。

/**
* @Author: 858834013@qq.com
* @Name: popWin
* @Date: 2022-02-12
* @Desc:
*/
<template>
  <div class="popWin">
    <div @click="getShow">
      <slot name="button"></slot>
    </div>
    <div v-if="show" class="popMask" @click="getHide"></div>
    <transition name="custom-classes-transition" enter-active-class="animated slideInRight"
                leave-active-class="animated slideOutRight">
      <div v-if="show" class="popWinBody">
        <div class="popWinHead">
          <div class="popWinTitle">{{ title }}</div>
          <div class="popWinClose" @click="getHide">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="popWinMain scrollBar">
          <slot name="body"></slot>
        </div>
        <div class="popWinFoot">
          <el-button class="mr13 w112" @click="getHide">取消</el-button>
          <el-button type="primary" class="mr28 w112" @click="submit">提交</el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>

export default {
  name: 'popWin',
  components: {},
  props: {
    title: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      status: '',
      show: false
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    getHide() {
      this.show = false
    },
    getShow() {
      this.show = true
    },
    submit() {
      this.$emit('submit', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.popMask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1002;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.popWinBody {
  width: 600px;
  right: 28px;
  background: #fff;
  position: fixed;
  top: 28px;
  bottom: 28px;
  z-index: 1003;
  height: calc(100% - 56px);

  .popWinFoot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 105px;

    .mr13 {
      margin-right: 13px;
    }

    .mr28 {
      margin-right: 28px;
    }

    .w112 {
      width: 112px;
    }
  }

  .popWinMain {
    position: relative;
    width: calc(100% - 28px);
    height: calc(100% - 84px - 105px - 28px);
    margin-left: 28px;
    margin-top: 28px;
    overflow-y: scroll;
  }

  .popWinHead {
    height: 84px;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0px 1px 0px 0px #E6E6E6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;

    .popWinTitle {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-left: 28px;
    }

    .popWinClose {
      width: 44px;
      height: 44px;
      background: #F4F9FD;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      margin-right: 28px;
      cursor: pointer;

      i {
        font-size: 24px;
        color: #0A1729;
      }
    }
  }
}
</style>