更新记录

2.0.0（2023-06-20）

组件优化

1.0（2023-06-02）

组件初始化

平台兼容性

cc-defineTag

使用方法

<template>
    <view class="content">

        <view class="titleV">自动换行设置1行标签栏(可改标签颜色)</view>
        <view style="width: 100vw;">

            <!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数1 color:文字颜色 bgColor:背景颜色 -->
            <cc-defineTag :tagList="tagListOne" rowNum="1" @click="goTagClick" bgColor="#F6F6F6"
                color="green"></cc-defineTag>

        </view>

        <view class="titleV">自动换行设置2行标签栏(可改标签颜色)</view>
        <view style="width: 100vw;">

            <!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数2 -->
            <cc-defineTag :tagList="tagListOne" rowNum="2" @click="goTagClick"></cc-defineTag>

        </view>

        <view class="titleV">自动换行设置3行标签栏(可改标签颜色)</view>
        <view style="width: 100vw;">

            <!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数1 -->
            <cc-defineTag :tagList="tagListOne" rowNum="3" color="red" @click="goTagClick"></cc-defineTag>

        </view>

        <view class="titleV">自动换行设置4行标签栏(可改标签颜色)</view>

        <view style="width: 100vw;">

            <!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数2 -->
            <cc-defineTag :tagList="tagListOne" rowNum="4" color="orange" @click="goTagClick"></cc-defineTag>

        </view>

        <view class="titleV">自动换行自适应高度标签栏(可改标签颜色)</view>

        <view style="width: 100vw;">

            <!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数 0不限制 -->
            <cc-defineTag :tagList="tagListOne" @click="goTagClick"></cc-defineTag>

        </view>

    </view>
</template>

HTML代码实现部分

<template>
    <view class="content">

        <view class="titleV">自动换行设置1行标签栏(可改标签颜色)</view>
        <view style="width: 100vw;">

            <!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数1 color:文字颜色 bgColor:背景颜色 -->
            <cc-defineTag :tagList="tagListOne" rowNum="1" @click="goTagClick" bgColor="#F6F6F6"
                color="green"></cc-defineTag>

        </view>

        <view class="titleV">自动换行设置2行标签栏(可改标签颜色)</view>
        <view style="width: 100vw;">

            <!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数2 -->
            <cc-defineTag :tagList="tagListOne" rowNum="2" @click="goTagClick"></cc-defineTag>

        </view>

        <view class="titleV">自动换行设置3行标签栏(可改标签颜色)</view>
        <view style="width: 100vw;">

            <!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数1 -->
            <cc-defineTag :tagList="tagListOne" rowNum="3" color="red" @click="goTagClick"></cc-defineTag>

        </view>

        <view class="titleV">自动换行设置4行标签栏(可改标签颜色)</view>

        <view style="width: 100vw;">

            <!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数2 -->
            <cc-defineTag :tagList="tagListOne" rowNum="4" color="orange" @click="goTagClick"></cc-defineTag>

        </view>

        <view class="titleV">自动换行自适应高度标签栏(可改标签颜色)</view>

        <view style="width: 100vw;">

            <!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数 0不限制 -->
            <cc-defineTag :tagList="tagListOne" @click="goTagClick"></cc-defineTag>

        </view>

    </view>
</template>

<script>
    export default {

        data() {
            return {
                title: 'Hello',
                tagListOne: ['标签一', '标签二', '标签三', '标签四', '标签五', '标签六', '标签七', '标签八', '标签九', '标签十', '标签十一', '标签十二', '标签十三',
                    '标签十四', '标签十五', '标签十六', '标签十七', '标签十八', '标签十九', '标签二十', '标签二十一', '标签二十二', '标签二十三', '标签二十四'
                ]
            }
        },
        onLoad() {

        },
        methods: {

            goTagClick(item) {

                uni.showModal({
                    title: '温馨提示',
                    content: '点击的tag条目数据: ' + item
                })
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .titleV {
        font-size: 14px;
        margin-top: 16px;
        margin-left: 16px;
        height: 20px;
        font-weight: 550;
    }
</style>