signal_web/src/components/dialog_referrer_list.vue

<template>
    <div v-show="show" :transition="transition">
        <div class="modal" @click.self="clickMask">
            <div class="modal-dialog" :class="modalClass">
                <div class="image-border image-border1"></div>
                <div class="image-border image-border2"></div>
                <div class="image-border image-border3"></div>
                <div class="image-border image-border4"></div>
                <div class="modal-content">
                    <!--Header-->
                    <div class="modal-header">
                        <slot name="header">
                            <i class="el-icon-close" @click="cancel"></i>
                            <h2 class="modal-title">
                                <slot name="title">
                                    {{title}}
                                </slot>
                            </h2>
                        </slot>
                    </div>
                    <!--Container-->
                    <div class="modal-body">
                        <slot></slot>
                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                        <slot name="footer">
                            <el-button type="primary" :class="cancelClass" @click="cancel">{{cancelText}}</el-button>
                            <el-button type="primary" @click="ok">{{okText}}</el-button>
                        </slot>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-backdrop in"></div>
    </div>
</template>

<script>
    export default {
        props: {
            show: {
                type: Boolean,
                twoWay: true,
                default: false
            },
            title: {
                type: String,
                default: 'Modal'
            },
            small: {
                type: Boolean,
                default: false
            },
            large: {
                type: Boolean,
                default: false
            },
            full: {
                type: Boolean,
                default: false
            },
            // 为true时无法通过点击遮罩层关闭modal
            force: {
                type: Boolean,
                default: false
            },
            // 自定义组件transition
            transition: {
                type: String,
                default: 'modal'
            },
            // 确认按钮text
            okText: {
                type: String,
                default: '确认'
            },
            // 取消按钮text
            cancelText: {
                type: String,
                default: '取消'
            },
            // 确认按钮className
            okClass: {
                type: String,
                default: 'btn blue'
            },
            // 取消按钮className
            cancelClass: {
                type: String,
                default: 'btn red btn-outline'
            },
            // 点击确定时关闭Modal
            // 默认为false，由父组件控制prop.show来关闭
            closeWhenOK: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                duration: null
            };
        },
        computed: {
            modalClass() {
                return {
                    'modal-lg': this.large,
                    'modal-sm': this.small,
                    'modal-full': this.full
                }
            }
        },
        mounted() {
            if (this.show) {
                document.body.className += ' modal-open';
            }
        },
        beforeDestroy() {
            document.body.className = document.body.className.replace(/\s?modal-open/, '');
        },
        watch: {
            show(value) {
                // 在显示时去掉body滚动条，防止出现双滚动条
                if (value) {
                    document.body.className += ' modal-open';
                }
                // 在modal动画结束后再加上body滚动条
                else {
                    if (!this.duration) {
                        this.duration = window.getComputedStyle(this.$el)['transition-duration'].replace('s', '') * 1000;
                    }
                    window.setTimeout(() => {
                        document.body.className = document.body.className.replace(/\s?modal-open/, '');
                    }, this.duration || 0);
                }
            }
        },
        methods: {
            ok() {
                this.$emit('dialog_ok');
            },
            cancel() {
                this.$emit('dialog_cancel');
            },
            // 点击遮罩层
            clickMask() {
                if (!this.force) {
                    this.cancel();
                }
            }
        }
    };
</script>

<style scoped>
    .modal {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: rgba(0, 0, 0, 0.3);
    }

    .modal-dialog {
        position: absolute;
        left: 0;
        right: 0;
        width: 799px;
        min-height: 400px;
        display: block;
        border: 1px solid #005EA2;
        background: rgba(0, 23, 67, 0.8);
        margin: 0 auto;
        margin-top: 10%;
    }

    .modal-transition {
        transition: all .6s ease;
    }

    .modal-leave {
        /* 样式没什么用，但可以让根标签的transitionEnd生效，以去掉modal-leave */
        border-radius: 1px !important;
    }

    .modal-transition .modal-dialog, .modal-transition .modal-backdrop {
        transition: all .5s ease;
    }

    .modal-enter .modal-dialog, .modal-leave .modal-dialog {
        opacity: 0;
        transform: translateY(-30%);
    }

    .modal-enter .modal-backdrop, .modal-leave .modal-backdrop {
        opacity: 0;
    }

    .modal-header {
        padding: 7px 22px;
    }

    .modal-body {
        padding: 5px 20px;
    }

    .modal-title {
        width: 473px;
        margin: 0 auto;
        margin-top: 10px;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        color: #6DC1FF;
        font-weight: normal;
        padding-bottom: 10px;
        background: url("../assets/img/headbotter.png") bottom center no-repeat;
        background-size: 100%;
    }

    .modal-footer button {
        padding: 10px 20px;
    }

    .image-border {
        position: absolute;
        width: 20px;
        height: 20px;
    }

    .image-border1 {
        top: 0px;
        left: 0;
        border-left: 2px solid #6DC1FF;
        border-top: 2px solid #6DC1FF;
    }

    .image-border2 {
        top: 0;
        right: -2px;
        border-right: 2px solid #6DC1FF;
        border-top: 2px solid #6DC1FF;
    }

    .image-border3 {
        bottom: 0;
        left: 0;
        border-bottom: 2px solid #6DC1FF;
        border-left: 2px solid #6DC1FF;
    }

    .image-border4 {
        bottom: 0;
        right: -2px;
        border-right: 2px solid #6DC1FF;
        border-bottom: 2px solid #6DC1FF;
    }

    .el-icon-close {
        float: right;
        color: #6DC1FF;
        margin-top: 10px;
        font-size: 16px;
    }


</style>