SmartCommunity/smart/src/components/common/alertModal.vue

<!--
 * @Author: wf
 * @Date: 2021-08-12 16:12:17
 * @LastEditors: D4THYL3
 * @LastEditTime: 2022-09-14 10:22:11
 * @Description: element-ui Dialog弹窗封装
-->
<template>
  <!-- <transition name="el-zoom-in-center"> -->
  <el-dialog
    v-if="modal.show"
    :visible.sync="modal.show"
    class="alert-modal"
    :width="modal.width"
    :fullscreen="modal.fullscreen"
    :custom-class="modal.customClass || 'alert-el-modal'"
    :class="{ 'is-modal': !modal.fullscreen, newpop: modal.class }"
    :append-to-body="true"
    :lock-scroll="true"
    @closed="close"
    ref="alertModal"
    top="0"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div slot="title">
      <div class="title_row">
        <strong class="title">{{ modal.title }}</strong>
        {{ modal.star }}
        <span v-if="modal.hideStar"></span>
        <span v-else-if="modal.title && !modal.notip"> (<span class="color-danger">*为必填项</span>) </span>
        <!-- <i class="close" @click="close"></i> -->
      </div>
    </div>
    <!-- :style="`height:${modal.showFooter ? 'calc(100% - 50px)' : 'calc(100% - 54px)'}`" -->
    <!-- <div class="body_content"> -->
    <div
      class="content"
      v-scroll
    >
      <component
        :id="modal.id"
        :is="modal.component"
        :params="modal.props"
        :ref="modal.id"
        @close="close"
      ></component>
    </div>
    <!-- </div> -->
    <span
      slot="footer"
      class="dialog-footer"
      v-if="!modal.fullscreen || modal.showFooter"
    >
      <el-button
        @click="alertReset(modal.id)"
        class="reset"
        v-if="modal.showResetButton"
      >重置</el-button>
      <el-button
        @click="close"
        class="reset"
        v-if="!modal.showCancelButton"
      >{{ modal.cancelButtonText || '取消' }}</el-button>
      <el-button
        type="primary"
        v-if="!modal.showConfirmButton"
        @click="submit(modal.id)"
      >{{
                modal.confirmButtonText || '保存'
            }}</el-button>
    </span>
  </el-dialog>
  <!-- </transition> -->
</template>

<script>
const preventBrowserBack = () => {
  history.pushState(null, null, document.URL);
};
/* 
  使用vuex this.$store.dispatch("openModal", {})打开弹窗,具体参数去store查看
*/
export default {
  name: 'alert-modal',
  props: {
    params: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      // modal:{}
    };
  },
  computed: {
    modal () {
      // const xx = this.$store.getters['getPopups'];
      let obj = this.params;
      if (obj && obj.height) {
        this.$nextTick(() => {
          if (this.$refs.alertModal && this.$refs.alertModal.$el && this.$refs.alertModal.$el.childNodes) {
            this.$refs.alertModal.$el.childNodes[0].style.height = obj.height;
          }
        });
      }
      if (obj.show) {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', preventBrowserBack, false);
      } else {
        window.removeEventListener('popstate', preventBrowserBack);
      }
      return obj;
    }
  },
  watch: {},
  methods: {
    close () {
      this.$store.dispatch('delPopup', this.modal.id);
    },
    // 弹窗重置，执行弹出组件的reset方法
    alertReset (id) {
      const component = this.$refs[id];
      component.reset && component.reset();
    },
    submit (id) {
      const component = this.$refs[id];
      component.submit && component.submit();
    }
  },
  created () {
    // debugger
    // this.modal=this.params;
  }
};
</script>

<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.alert-modal {
    overflow: hidden;
    /deep/.el-dialog {
        .el-dialog__header {
            height: 54px;
            border-radius: 6px 6px 0 0;
            background: rgba(248, 252, 255, 1);
            padding: 0 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
        }
        .el-dialog__body {
            padding: 20px;
            overflow: auto;
            .content {
                height: 100%;
            }
            // margin-bottom: 20px;
            .el-form {
                .el-select,
                .el-cascader {
                    width: 100%;
                }
            }
            &::-webkit-scrollbar {
                display: none;
            }
        }
        .el-dialog__footer {
            border-top: none;
            position: relative;
            bottom: 10px;
            margin-top: 10px;
            .dialog-footer .reset {
                border: 1px solid #0eaeff;
                color: #0eaeff;
            }
            .el-button--primary {
                background-color: #0eaeff;
                // border-color: #0eaeff;
            }
        }
        &.is-fullscreen {
            height: 100% !important;
            border-radius: 0;
            .el-dialog__body {
                position: absolute;
                left: 0;
                bottom: 0;
                top: 54px;
                right: 0;
                display: flex;
                justify-content: center;
            }
        }
    }
}
.is-modal {
    .el-dialog {
        border-radius: 8px;
        width: auto;
        max-height: 80%;
        min-height: 210px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        .el-dialog__body {
            /deep/ .content {
                height: 100% !important;
            }
        }
    }
    //     .el-dialog__body::-webkit-scrollbar {
    // 	display: none;
    // }
}

.newpop .el-dialog {
    background: transparent;
}
.newpop .el-dialog .el-dialog__header {
    height: 50px;
    background: rgba(13, 21, 41, 0.3);
}
.newpop .el-dialog .el-dialog__body {
    height: 100%;
    padding: 0;
}
.newpop .el-dialog .el-dialog__footer {
    display: none;
}
.newpop .title {
    color: #fff;
}
.color-danger {
    color: red;
}
</style>