首页 > 试题广场 >

请实现一个弹出对话框组件, 如下图(可以使用vue, jqu

[问答题]
请实现一个弹出对话框组件, 如下图(可以使用vue, jquery, react等框架)

<template>
    <div class="cover" v-show="show">
        <div class="popup">
            <header>
                <span><slot name="header">默认标题</slot></span>
                <span @click="hide">×</span>
            </header>
            <nav>
                <slot name="content">默认内容</slot>
            </nav>
            <footer>
                <button @click="hide">确认</button>
            </footer>
        </div>
    </div>
</template>

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

<style lang="scss" scoped>
 .cover{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(111111111,0.2 ) ;
    .popup{
        color:black;
        width: 300px;
        height: 300px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%-50%10px);
        background-color: antiquewhite;
        z-index: 1000;
    
        header{
            background-color: aquamarine;
            padding: 5px 10px;
            display: flex;
            justify-content: space-between;
            span{
                cursorpointer;
                font-size: larger;
            }
        }
        nav{
            height:200px;
            padding: 5px 10px;
        }
    }
}

</style>
发表于 2020-06-28 11:12:25 回复(0)