vh-实现弹窗

 

    <div class="default_layer" >

        <div class="layer_main">

            <div class="main" :style="{'background-color':bg_color,'max-width':width+'px'}">

                <h4 class="layer_title" v-if="title_lock">{{title}}</h4>

                <slot name="layer_main"></slot>

                <div class="footer_bottom">

                    <el-button size="small" class="sure_wrap">确定</el-button>

                    <el-button size="small" class="cancel_wrap">取消</el-button>

                </div>

            </div>

        </div>

    </div>

 

 data() {

        return{

　　　　title:'标题'

　　}

    },

 

 

 

.default_layer {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(0, 0, 0, 0.6);

    z-index: 1000;

    text-align: center;

    line-height: 100vh;

   .layer_main{

        box-sizing: border-box;

        display: inline-block;

        text-align: left;

        .main{

            min-width: 320px;

            padding:10px;

            margin: 0 auto;

            max-height: 80vh;

            background-color: white;

            vertical-align: middle;

            display: inline-block;

            word-break: break-all;

            overflow-x: scroll;

            .layer_title{

                border-bottom: 1px solid #eee;

                font-size: 14px;

                color: #333;

                padding-bottom:10px;

            }

            .footer_bottom{

                padding-top:10px;

                text-align: center;

                font-size: 13px;

                .sure_wrap{

                    min-width: 80px;

                    color: white;

                    background-color: #428bca;

                }

                .cancel_wrap{

                    min-width: 80px;

                    color: #545454;

                    background-color: #f5f5f5;

                    border-color: #e9e9e9;

                }

            }

        }

   }

}

 

 效果

 

转载于:https://www.cnblogs.com/front-969376855/p/11541813.html