uniapp 打造自用组件库 (一) 标题栏

uniapp 打造自用组件库 (一) 标题栏

前言

本文将带领读者使用uniapp封装一些常用组件，方便日后开发时重复使用，当然文中封装的组件不可能适配所有应用场景，但是我希望读者可以跟着我的思路实现出来，然后可以在此基础上优化改进为自己合适的，本人一个前端小菜鸡，希望大佬们可以不吝赐教，也是对我的技术水平的提升

标题栏

实现效果

应用效果

实现思路

通过flex布局将盒子分成左右两部分，右侧预留 需要可以自己添加东西，左侧分为3部分:色块、标题、气泡，色块通过接收传入的颜色来显示不同颜色，不传默认不显示，标题默认为 '标题'，传入显示新的，气泡通过传入的数字控制，为0或不传不显示，然后调整样式

实现代码

<template>
    <view @tap="change" class="all" >
        <view class="title" >
            <view class="titleLeft">
                <view class="view" v-if="(pieceColor)" :style="{backgroundColor:pieceColor}"></view>
                <text class="text" :style="{color:color}">{{value}}</text>
                <view class="bubble" :style="{backgroundColor:pieceColor}" v-if="num>0">{{num}}</view>
            </view>
      <view class="titleRight">
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            //标题
            value: {
                type: String,
                default: '标题'
            },
            //文字颜色
            color: {
                type: String,
                default: '#333'
            },
            //色块颜色 默认空
            pieceColor: {
                type: String,
                default: ''
            },
            //数字气泡 0未空
            num: {
                type: Number,
                default: 0
            },
        },
        
        data() {
            return {

            };
        },
        
        methods: {
            change(e) {
                this.$emit('change', this.value)
            }
        },
    }
</script>

<style lang="scss" scoped>
    .all {
        background:rgba(255,255,255,0.8);
        backdrop-filter: saturate(180%) blur(20px);
    }

    .bubble {
        margin-left: 20rpx;
        padding: 0rpx 10rpx;
        display: flex;
        font-size: 10px;
        color: #FFFFFF;
        justify-content: center;
        align-items: center;
        border-radius: 80rpx;
    }

    .title {

        display: flex;
        align-items: center;
        padding: 30rpx;
        .titleLeft{
            display: flex;
            flex: 1;
            .view {
                width: 10rpx;
                height: 40rpx;
                margin-right: 20rpx;
                border-radius: 5rpx;
            }
            .text {
                font-size: 16px;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        
    }
</style>