uniapp 打造自用组件库 (一) 标题栏-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

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

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

前言

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

标题栏

实现效果

image.png

应用效果

image.png

实现思路

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章