<template>
    <!-- 弹窗 -->
    <div v-if="show">
        <div @click="show = false"
            style="height: 100%;width: 100%;background-color: #000;opacity: 0.68;position: fixed;top: 0px;z-index: 9998;">
        </div>
        <div style="z-index: 9999;position: fixed;top: 0px;width: 100%;font-size:14px;max-height:0px;" class="confirm-content-wrap">
            <div style="width:100%;margin: 20% auto;border-radius: 15px;overflow:hidden;">
                <div @click="show = false"
                    style="position: relative;left:88%;top:40px;background-color:#fc4f4f;color:#fff;font-size:12px;width:20px;height:20px;line-height:20px;text-align: center;border-radius: 50%;">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close"></use>
                    </svg>
                </div>
                <div style="display:flex;" @click="show = false">
                    <div style="font-size:25px;font-weight:bold;color:#fff;margin:10px auto;">
                        <slot name="title">
                            <!-- 标题 -->
                            <span v-if="title">{{title}}</span>
                        </slot>
                    </div>
                </div>
                <div
                    style="background-color:rgba(255, 255, 255, 1);margin: 0 auto;width:95%;border-radius: 15px;overflow: auto;box-shadow: 0 0px 7px rgba(0, 0, 0, 0.2);padding:10px">
                    <slot name="content">
                    </slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            // 标签文本
            title: {
                type: String,
                default: "弹窗"
            },

        },
        data() {
            return {
                show: false,
            }
        },
        methods: {
            open() {
                this.show = true;
            },
            close() {
                this.show = false;
            }
        },
    }
</script>

<style> 
    /* 弹窗动画初试 */
    .confirm-content-wrap {
        animation: scale 0.3s;
    }

    @keyframes scale {
        0% {
            transform: scale(0);
        }

        60% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }

    @-webkit-keyframes scale {
        0% {
            transform: scale(0);
        }

        60% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }
</style>