tf-business-card/components/capsule/capsule.vue

<template>
    <view class="capsule" :style="{ backgroundColor: bgColor, paddingTop: top + 'px'  }">
        <view class="title" v-if="showBorder" :style="{ height: height, paddingLeft: titleLeft, display: isSecurity ? 'none' : 'block' }">
            <slot name="top"></slot>
        </view>
    </view>
</template>

<script>
export default {
    created() {
        // #ifdef MP-WEIXIN
        //  获取胶囊按钮的位置
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        // console.log(menuButtonInfo);
        this.height = menuButtonInfo.height + 'px'
        this.top = menuButtonInfo.top
        //  获取整个页面的宽度
        uni.getSystemInfo({
            success: res => {
                // console.log(res);
                //  如果只需要安全区域的话 那就不需要高度
                if (this.isSecurity) {
                    this.top = res.safeAreaInsets.bottom + 'px'
                    return
                }
                this.titleLeft = res.windowWidth - menuButtonInfo.right + "px"
            }
        })
        // #endif
    },
    props: {
        title: {
            type: String,
        },
        bgColor: {
            type: String,
        },
        //  是不是只需要安全区域
        isSecurity: {
            type: Boolean,
            default: false
        },
        // 是否需要安全区域且于胶囊按钮平齐
        showBorder: {
            type: Boolean,
            default: false
        },
        showIcon: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            height: null,
            top: null,
            titleLeft: null,
        }
    },
    mounted () {
        //  计算该组件的高度并返回给父组件
      this.$emit('getHeight', this.top)  
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
.capsule {
    width: 100%;
    .title {
        padding-left: 30rpx;
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.8);
        font-size: 32rpx;
        font-weight: 700;
        display: flex !important;
        align-items: center;
        gap: 10rpx;
    }
}
</style>