更新记录

1.3.0（2024-12-06） 下载此版本

效果优化

1.2.0（2024-11-19） 下载此版本

优化this

1.1.0（2024-03-29） 下载此版本

支持small大小格式、空心标签

平台兼容性

uni-app

其他

支持扫码体验-见右侧二维码

<template>
    <view class="tag-content">
        <view class="tag-title">small标签</view>
        <tag-list tabValueName="_id" size="small" tagShowName="category" :limit="2" :type="type" :tagList="tagList"
            :selectedTagList="selectTagList" @delete="handleDelete" @select="handleSelectTag" />
        <view class="tag-title">small选中标签</view>
        <tag-list tabValueName="_id" size="small" tagShowName="category" :limit="2" :type="type" :tagList="tagList"
            :selectedTagList="selectedTagList" @delete="handleDelete" @select="handleSelectTag" />
        <view class="tag-title">small删除标签</view>
        <tag-list tabValueName="_id" size="small" tagShowName="category" :limit="2" type="delete" :tagList="tagList"
            @delete="handleDelete" @select="handleSelectTag" />

        <view class="tag-title">未选中标签</view>
        <tag-list tabValueName="_id" tagShowName="category" :limit="2" :type="type" :tagList="tagList"
            :selectedTagList="selectTagList" @delete="handleDelete" @select="handleSelectTag" />
        <view class="tag-title">选中标签</view>
        <tag-list tabValueName="_id" tagShowName="category" :limit="2" :type="type" :tagList="tagList"
            :selectedTagList="selectedTagList" @delete="handleDelete" @select="handleSelectTag" />
        <view class="tag-title">删除标签</view>
        <tag-list tabValueName="_id" tagShowName="category" :limit="2" type="delete" :tagList="tagList"
            @delete="handleDelete" @select="handleSelectTag" />

        <view class="tag-title">空心未选中标签</view>
        <tag-list tabValueName="_id" tagShowName="category" showType="hollow" :limit="2" :tagList="tagList"
            @delete="handleDelete" @select="handleSelectTag" />
        <view class="tag-title">空心选中标签</view>
        <tag-list tabValueName="_id" tagShowName="category" showType="hollow" :limit="2" :type="type" :tagList="tagList"
            :selectedTagList="selectedTagList" @delete="handleDelete" @select="handleSelectTag" />
        <view class="tag-title">空心删除标签</view>
        <tag-list tabValueName="_id" tagShowName="category" showType="hollow" :limit="2" type="delete"
            :tagList="tagList" @delete="handleDelete" @select="handleSelectTag" />

        <view class="tag-title">圆形未选中标签</view>
        <tag-list tabValueName="_id" tagShowName="category" showType="round" :limit="2" :tagList="tagList"
            @delete="handleDelete" @select="handleSelectTag" />
        <view class="tag-title">圆形选中标签</view>
        <tag-list tabValueName="_id" tagShowName="category" showType="round" :limit="2" :type="type" :tagList="tagList"
            :selectedTagList="selectedTagList" @delete="handleDelete" @select="handleSelectTag" />
        <view class="tag-title">圆形删除标签</view>
        <tag-list tabValueName="_id" tagShowName="category" showType="round" :limit="2" type="delete" :tagList="tagList"
            @delete="handleDelete" @select="handleSelectTag" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tabValueName: '_id',
                tagShowName: 'category',
                type: '', // delete【右上角出删除图标，无法选中，点击图标回调@delete】
                selectTagList: [],
                selectedTagList: [{
                    _id: "1",
                    category: "标签"
                }, {
                    _id: "2",
                    category: "标签"
                }, {
                    _id: "3",
                    category: "标签"
                }, {
                    _id: "4",
                    category: "标签"
                }, {
                    _id: "5",
                    category: "标签"
                }],
                tagList: [{
                    _id: "1",
                    category: "标签"
                }, {
                    _id: "2",
                    category: "标签"
                }, {
                    _id: "3",
                    category: "标签"
                }, {
                    _id: "4",
                    category: "标签"
                }, {
                    _id: "5",
                    category: "标签"
                }],
            };
        },
        methods: {
            /**
             * 选中、取消标签
             */
            handleSelectTag(seletedTagList) {
                this.selectTagList = seletedTagList
            },
            /**
             * 点击删除标签回调
             */
            handleDelete(data) {
                const {
                    item,
                    index
                } = data
                this.tagList.splice(index, 1)
            }
        },
    }
</script>
<style lang="scss">
    .tag-content {
        padding: 0 24rpx;

        .tag-title {
            font-size: 30rpx;
            font-weight: 600;
            margin: 24rpx 0;
        }
    }
</style>