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

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

前言

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

标题栏

实现效果

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

应用效果

实现思路

通过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>

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏

[[email protected]]

分享 (0)