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>