diagnosis.admin/src/components/Propup.vue

<template>
  <div class="propup">
    <el-dialog
      :visible.sync="showDialog"
      :show-close="false"
      :width="width"
      :modal="modal"
      :close-on-click-modal="false"
      :top="distanceTop"
      :destroy-on-close="true"
      :fullscreen="fullscreen"
      :append-to-body="appendToBody"
    >
      <div slot="title" class="header flex-center">
        <span>{{title}}</span>
        <div @click="closePropup()">+</div>
      </div>
      <div class="popup-container" v-if="showBody" v-loading="loading">
        <slot name="body"></slot>
        <div class="btns flex-center" v-if="showBtns">
          <div class="confim flex-center" @click="confim()" v-if="confimText">{{confimText}}</div>
          <div class="cancle flex-center" @click="cancle()" v-if="!hideCancleButton" :style="cancleStyle">{{cancleText}}</div>
        </div>
      </div>
      <div v-else v-loading="loading">
        <slot name="body"></slot>
        <div class="btns flex-center" v-if="showBtns">
          <div class="confim flex-center" @click="confim()" v-if="confimText">{{confimText}}</div>
          <div class="cancle flex-center" @click="cancle()" v-if="!hideCancleButton" :style="cancleStyle">{{cancleText}}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "添加信息"
    },
    width: {
      type: String,
      default: "50%"
    },
    confimText: {
      type: String,
      default: "保存"
    },
    cancleText: {
      type: String,
      default: "取消"
    },
    cancleStyle: {
      type: Object,
      default: () => {
        return {
          background: "#EEEEEE"
        };
      }
    },
    showBtns: {
      type: Boolean,
      default: true
    },
    hideCancleButton: {
      type: Boolean,
      default: false
    },
    distanceTop: {
      type: String,
      default: "15vh"
    },
    showBody: {
      type: Boolean,
      default: true
    },
    modal: {
      type: Boolean,
      default: true
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 关闭弹窗
    closePropup() {
      this.$emit("update:showDialog", false);
      this.$emit("cancle", 1);
    },
    // 取消按钮点击
    cancle() {
      this.$emit("cancle", 2);
    },
    // 确定按钮点击
    confim() {
      this.$emit("confim");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../style/common.scss";

.propup {
  .header {
    // width: 642px;
    height: 34px;
    background: #5386f6;
    position: relative;

    div {
      transform: rotate(45deg);
      color: #fff;
      position: absolute;
      top: -8px;
      right: 25px;
      font-size: 44px;
      cursor: pointer;
    }

    span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .popup-container {
    // max-height: 400px;
    height: 80vh;
    overflow-y: auto;
  }

  .btns {
    margin-top: 20px;

    div {
      width: 108px;
      height: 40px;
      // background: #5386F6;
      border-radius: 3px;
      font-size: 18px;
      cursor: pointer;
    }

    .confim {
      background: #5386f6;
      color: #fff;
      margin-right: 30px;
    }

    .cancle {
      background: #eeeeee;
      color: #333333;
    }
  }
}

.propup ::v-deep .el-dialog {
  margin: 0 auto;
}

.propup ::v-deep.el-dialog__header {
  padding: 0;
}

.propup ::v-deep .el-dialog__body {
  padding: 18px 18px;
}
</style>