更新记录

1.0.2（2023-04-04） 下载此版本

优化代码

1.0.1（2023-03-28） 下载此版本

新增： 1、删除功能 2、可在 tag 前后添加 图片/图标/文字等自定义内容

1.0.0（2023-03-28） 下载此版本

发布 lx-tags 组件

平台兼容性

lx-tags

基于 uni-tag 开发的 lx-tags 组件，支持 uni-tag 的属性

1. 支持单选和多选，可在 tag 中添加图片/图标/文字等自定义内容，有删除功能
2. 可自定义字体颜色，背景颜色，边框颜色和选中后的颜色
3. change 事件返回选中后的数组
4. 有其他个性化要求，直接修改源码 tag 样式即可

注意：该插件依赖 uni-icons 插件，插件市场搜索导入即可

基本用法

导入方法：

1. 直接使用 HBuilderX 导入插件
2. 下载插件 zip ,将 lx-tags 文件夹复制到项目 components 文件夹中，import+components 引入。

使用方法(demo)：

    <template>
    <view class="container">
        <!-- 基础标签 -->
        <view class="text">不同 type 标签（primary/success/info/error/warning/...）</view>
        <view class="tag_container">
            <lx-tags :list="list" />
            <lx-tags :list="list" type="success" />
            <lx-tags :list="list" type="error" />
        </view>

        <!-- 圆形标签 -->
        <view class="text">圆形标签</view>
        <view class="tag_container"><lx-tags :list="list" circle /></view>

        <!-- 空闲标签 -->
        <view class="text">空心标签</view>
        <view class="tag_container"><lx-tags :list="list" inverted /></view>

        <!-- 可删除标签 -->
        <view class="text">可删除标签</view>
        <view class="tag_container"><lx-tags :list="list" deletable /></view>

        <!-- 添加标签 -->
        <view class="text">添加标签</view>
        <view class="tag_container flex">
            <lx-tags :list="list3"></lx-tags>
            <button class="zy_tag_add" @click="handleClick">+ New Tag</button>
        </view>

        <!-- 不同尺寸标签 -->
        <view class="text">不同尺寸标签（normal/small/mini）</view>
        <view class="tag_container">
            <lx-tags :list="list2" />
            <lx-tags :list="list2" size="small" />
            <lx-tags :list="list2" size="mini" />
        </view>

        <!-- 添加图片/图标 -->
        <view class="text">添加图片/图标的标签</view>
        <view class="tag_container">
            <lx-tags :list="list2" inverted>
                <template v-slot:left>
                    <image style="width: 20px;height: 20px;" src="../../static/1.png"></image>
                </template>
            </lx-tags>
            <lx-tags :list="list2">
                <template v-slot:right>
                    <uni-icons type="paperplane" size="20"></uni-icons>
                </template>
            </lx-tags>
        </view>

        <!-- 单选标签 -->
        <view class="text">单选标签</view>
        <view class="tag_container"><lx-tags :list="list1" multiple /></view>

        <!-- 多选标签 -->
        <view class="text">多选标签</view>
        <view class="tag_container"><lx-tags :list="list" inverted active-back-color="#2979ff" active-color="#ffffff" border-color="#000000" /></view>
    </view>
    </template>

    <script>
    export default {
    data() {
        return {
            list: [],
            list1: [],
            list2: [],
            list3: []
        };
    },
    onLoad() {
        this.list = [
            { label: '标签一', value: 1 },
            { label: '标签二', value: 2 },
            { label: '标签三', value: 3 },
            { label: '标签四', value: 4, disabled: true },
            { label: '标签五', value: 5 },
            { label: '标签六', value: 6 }
        ];
        this.list1 = [
            { label: '标签一', value: 1 },
            { label: '标签二', value: 2 },
            { label: '标签三', value: 3 },
            { label: '标签四', value: 4, disabled: true },
            { label: '标签五', value: 5 },
            { label: '标签六', value: 6 }
        ];
        this.list2 = [{ label: '标签一', value: 1 }];

        this.list3 = [{ label: '标签一', value: 1 }, { label: '标签二', value: 2 }, { label: '标签三', value: 3 }];
    },
    methods: {
        handleChange(data) {
            console.log('data', data);
        },
        handleClick() {
            this.list3.push({ label: '新标签', value: this.list3.length + 1 });
            console.log('this.list3', this.list3);
        }
    }
    };
    </script>

Attributes，Events and Slot