SmartCommunity/userCenter/src/components/common/XKModal.vue

/*
 * @Author: wf 
 * @Date: 2021-09-Tu 05:49:30 
 * @Last Modified by:   wf 
 * @Last Modified time: 2021-09-Tu 05:49:30 
 */

<template>
    <!-- <transition name="el-zoom-in-center"> -->
    <el-dialog
        v-if="modal.show"
        :visible.sync="modal.show"
        class="xk-modal"
        :width="modal.width"
        :fullscreen="modal.fullscreen"
        :custom-class="modal.customClass || 'xk-el-modal'"
        :class="{ 'is-modal': !modal.fullscreen,'newpop':modal.class }"
        :append-to-body="true"
        :lock-scroll="true"
        @closed="close"
        ref="xkModal"
        top="0"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <div slot="title">
            <span class="title">{{ modal.title }}</span>
            <span v-if="modal.title && !modal.notip">
                (
                <span class="color-danger">*为必填项</span>)
            </span>
        </div>
        <component
            :id="modal.id"
            :is="modal.component"
            :params="modal.props"
            :ref="modal.id"
            @close="$store.dispatch('closeModal')"
        ></component>
        <span slot="footer" class="dialog-footer" v-if="!modal.fullscreen||showFooter">
            <el-button @click="close()" 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: 'xk-modal',
    props: {
        params: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {};
    },
    computed: {
        modal() {
            const obj = this.$store.getters['getModalParams'];
            if (obj && obj.height) {
                this.$nextTick(() => {
                    if (this.$refs.xkModal && this.$refs.xkModal.$el && this.$refs.xkModal.$el.childNodes) {
                        this.$refs.xkModal.$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;
        }
    },
    methods: {
        close() {
            this.$store.dispatch('closeModal');
           
        },
        submit(id) {
            const component = this.$refs[id];
            component.submit && component.submit();
        }
    }
};
</script>

<style lang="scss">
.xk-modal {
    overflow: hidden;
    .el-dialog {
        .el-dialog__header {
            height: 54px;
            border-radius: 6px 6px 0 0;
            border-bottom: 1px solid #eaedf3;
            padding: 0 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;            
            background: #F7FBFF;
        }
        .el-dialog__body {
            padding: 20px;
            overflow: auto;
            .el-form {
                .el-select,
                .el-cascader {
                    width: 100%;
                }
            }
            &::-webkit-scrollbar{
                display: none;
            }
        }
        .el-dialog__footer {
            border-top: 1px solid #eaedf3;
        }
        &.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 {
            height: calc(100% - 110px);
        }
    }
}

.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>