lv-components/docs/.vuepress/components/lv-dialog.vue

<template>
    <div class="lv-dialog" v-if="show">
        <div class="lv-content">
            <div class="header">
                <div class="title">{{title ? title : '提示'}}</div>
                <div class="close" @click="close"></div>
            </div>
        </div>
        <div class="lv-bg"></div>
    </div>
</template>

<script>
export default {
    name: 'lv-dialog',
    data () {
        return {
            show: false,
        }
    },
    watch: {
        value(newV) {
            this.show = newV;
        }
    },
    props: {
        value: {
            type: Boolean,
            default: false
        },
        title: String,
    },
    methods: {
        close() {
            this.$emit('input', false);
        }
    }
}
</script>

<style lang="less" scope>
.lv {
    &-dialog {
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
    }
    &-content {
        user-select: none;
        position: absolute;
        z-index: 1000;
        top: 50%;
        left: 50%;
        width: 30%;
        min-width: 500px;
        min-height: 300px;
        background-color: #fff;
        transform: translate(-50%, -50%);
        .header {
            position: relative;
            height: 56px;
            line-height: 56px;
            border-bottom: solid 1px rgba(0, 0, 0, 0.06);
            .title {
                font-weight: bold;
                text-align: center;
            }
            .close {
                position: absolute;
                cursor: pointer;
                top: 18px;
                right: 20px;
                width: 20px;
                height: 20px;
                &::before, &::after {
                    position: absolute;
                    content: '';
                    left: 10px;
                    width: 1px;
                    height: 20px;
                    background-color: #666;
                }
                &::before {
                    transform: rotate(45deg);
                }
                &::after {
                    transform: rotate(-45deg);
                }
            }
        }
    }
}
</style>