平台兼容性

项目说明

本项目是基于uni-app的一个通用组件。可支持小程序，也支持APP。 组件名称为“标签组件”，通过属性设置可支持只读标签，也支持可编辑标签

组件功能说明：

1. 输入文字，点添加，可新建一个标签
2. 可同时输入多个标签，以逗号相隔
3. 标签新建后自动添加到后面
4. 标签上自带删除图标，点击可删除
5. 删除图标可配置显示/隐藏
6. 标签背景色可配置内置的5种颜色
7. 标签可点击触发事件
8. 标签删除时可触发删除事件
9. 添加区域可配置显示/隐藏
10. 可获取当前标签的数据列表

历史版本说明

使用说明

拷贝该组件到components目录下之后

在 script中引用组件

import robbyTags from '@/components/robby-tags/robby-tags.vue'
export default {
    components: {robbyTags}
}

在 template 中使用组件：

<robby-tags :value="tagList"></robby-tags>
<robby-tags v-model="tagList" @add="addTag" @delete="delTag" :enable-del="enableDel" :enable-add="enableAdd"></robby-tags>

双向绑定说明

v-model: 类型为字符串数组。 即标签数组，可用于初始化，当添加/删除操作时，绑定的数据都会同步更新

属性说明

事件说明

demo示例

<template>
    <view class="uni-common-mt">
        <view class="uni-label">
            为作品贴标签
        </view>
        <robby-tags v-model="tagList" @add="addTag" @delete="delTag" @click="clickTag" :enable-del="enableDel" :enable-add="enableAdd"></robby-tags>
        <view :key="index" v-for="(tag,index) in tagList">
            {{index}}. {{tag}}
        </view>
    </view>
</template>
<script>
    import robbyTags from '@/components/robby-tags/robby-tags.vue'
    export default {
        data() {
            return {
                enableDel: true,
                enableAdd: true,
                colorType: 'primary',
                tagList: ['建筑','动漫','艺术']
            }
        },
        methods:{
            clickTag: function(e){
                console.log(e)
            },
            delTag: function(e){
                console.log(e)
            },
            addTag: function(e){
                console.log(e)
            }
        }
    }
</script>