CABaggageData2.0/src/layout/components/Dialog/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-19 14:56:17
 * @LastEditTime: 2022-04-28 11:22:47
 * @LastEditors: your name
 * @Description: 弹出框
 * @FilePath: \Foshan4A\src\layout\components\Dialog\index.vue
-->
<template>
  <div class="dialog">
    <el-dialog
      :visible.sync="flag"
      ref="dialogTk"
      :top="top"
      :custom-class="customClass"
      :lock-scroll="false"
      :modal="modal"
      :before-close="close"
      :width="width"
      :show-close="showFlag"
    >
      <div
        :style="{
          height: child
            ? this.$store.state.settings.dialogHeight - 96 + 'px'
            : '',
        }"
        class="dialog-content"
      >
        <slot />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  props: {
    // 弹框开关
    flag: {
      type: Boolean,
      default: false,
    },
    showFlag: {
      type: Boolean,
      default: false,
    },
    // 弹框宽度
    width: {
      type: String,
      default: "400px",
    },
    // 弹框类名
    customClass: {
      type: String,
      default: "",
    },
    // 弹框高度
    top: {
      type: String,
      default: "0vh",
    },
    // 弹框遮罩层
    modal: {
      type: Boolean,
      default: true,
    },
    // 二级弹框标记
    child: {
      type: Boolean,
      default: false,
    },
  },
  // 监听弹框开关
  watch: {
    flag: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            // 获取弹框高度
            const height = this.$refs["dialogTk"].$refs.dialog.clientHeight;
            if (height) {
              // 当前弹框无二级弹框时 存入高度
              if (!this.child) {
                this.$store.state.settings.dialogHeight = height;
              }
            }
          });
        }
      },
      deep: true,
    },
  },
  methods: {
    // 弹框关闭
    close() {
      this.$emit("closeDialog", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  ::v-deep .el-dialog {
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
      .title {
        padding: 10px 0px 10px 20px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        height: 36px;
        background: #2d67e3;
        color: #ffffff;
        margin-bottom: 24px;
        width: 100%;
      }
      .del-title,
      .Deltitle {
        padding: 10px 0px 10px 20px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        height: 36px;
        background: #eb2f3b;
        color: #ffffff;
        display: flex;
        align-items: center;
        margin-bottom: 36px;
        width: 100%;
      }
      .Delfoot {
        background-color: #fff;
      }

      .del-content {
        .error {
          color: #eb2f3b;
        }
      }
      .dialog-content .el-form {
        padding-right: 24px;
      }
      .el-form-item__label {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #303133;
      }
    }
    .el-button + .el-button {
      margin-left: 0px;
    }
  }
}
</style>