标签：flex popup title max app ani uni margin top

我的需求是：弹出框顶部有 title，底部有确认和取消按钮。这两部分固定，中间部分 content 的高度随自身内容会动态增长，但是它最大高度不能超过父节点 bg 的 80%，而父节点 bg 的高度也是随自身内容动态变化，但最大高度又不能超过其父 cover 的 80%

<template>
    <view v-if="showHello" :class="['cover', ani]" @tap="show(false)">
        <view :class="['bg', 'translateCenter', ani]" @tap.stop="clear">
            <view class="title">
                {{title}}
            </view>
            <view class="content">
                <slot />
            </view>
            <view class="btn" >
                <button type="default" @tap="show(false)">取消</button>
                <button type="primary" @tap="confirm">确定</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "helloPopup",
        props: {
            title: {
                type: String,
                default: 'title',
            },
        },
        watch: {
            title(newValue, oldValue) {
                console.log('title:', newValue, oldValue)
            },
        },
        created(e) {},
        data(){
            return {
                showHello: false,
                ani: '',
            }
        },
        methods: {
            show(b){
                if(b){
                    this.showHello = true
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.ani = 'ani'
                        }, 30)
                    })
                }else{
                    this.ani = ''
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.showHello = false
                        }, 300)
                    })
                }
            },
            clear(){},
            confirm(){
                this.$emit('confirm')
            },
        },
    }
</script>

<style>
@charset "UTF-8";

*{margin:0;padding:0}
.translateCenter{ position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.cover{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    transition: all .3s;
}
.cover.ani{
    opacity: 1;
}
.bg{
    max-height: 3%;
    width: 3%;
    opacity: 0;

    transition: all .3s;
}
.bg.ani{
    max-height: 80%;
    width: 80%;
    opacity: 1;

    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;

    border-radius: 16upx;
    padding: 24upx 24upx;
    overflow: hidden;
}
.content{
    width: 100%;
    max-height: 80%;
    overflow:auto;
}
.title{
    text-align: center;
    font-size: 38upx;
}
.example-body {
    /* border-top: 2px solid #00CE47; */
    margin-top: 0;
    padding: 30upx 5upx;
    background: #fff;
    max-height: 70%;
}
.example-box {
    display: block;
    margin-bottom: 30upx;
    border: 2upx solid #0D9EBB;
    /* border-bottom: 2upx solid #FFB400; */
}
.example-box:last-child {
    margin-bottom: 0;
}
.btn{
    display: flex;
    flex-direction: row;
    justify-content: center;

    align-items: center;
    align-content: center;

    vertical-align: middle;
    margin-top: 40upx;
    margin-bottom: 20upx;
    /* background-color: #00CE47; */
}
.btn button{
    flex: auto;
    max-width: 40%;
}
</style>

欢迎留言～

标签：flex,popup,title,max,app,ani,uni,margin,top
来源： https://www.cnblogs.com/hangj/p/11460124.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。