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>