uni-app 小白徒手编写自己的类 popup 组件 hello-popup

我的需求是：弹出框顶部有 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