[TOC] # Tag 标签 用于展示文字标签，可点击切换选中、不选中的状态，组件名：`ts-tag`。 **使用方式：** 在`script`中引用组件 ~~~ import tsTag from "@/components/teaset/components/ts-tag/ts-tag.vue" export default { components: {tsTag} } ~~~ 在`template`中使用组件 ~~~ <ts-tag text="标签" type="primary"></ts-tag> <ts-tag text="标签" type="error" :circle="true"></ts-tag> <ts-tag text="标签" @click="bindClick"></ts-tag> ~~~ ``` <view> <ts-tag text="12345" type="error" size="normal"></ts-tag> <ts-tag text="12345" type="warning" size="small"></ts-tag> <ts-tag text="12345" type="primary" size="small"></ts-tag> <ts-tag text="12345" type="success" size="small"></ts-tag> </view> ``` **属性说明：** | 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | text | String | \- | 标签内容 | | size | String | normal | 大小尺寸，可选值：normal、small | | type | String | default | 颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色) | | disabled | Boolean | false | 是否为禁用状态 | | inverted | Boolean | false | 是否无需背景颜色（空心标签） | | circle | Boolean | false | 是否为圆角 | **事件说明：** | 事件称名 | 说明 | | --- | --- | | click | 点击 Tag 触发事件 | # Tags标签组 显示一组标签 **使用方式：** 在`script`中引用组件 ~~~ import tsTags from "@/components/teaset/components/ts-tag/ts-tags.vue" export default { components: {tsTags} } ~~~ 在`template`中使用组件 ~~~ <ts-tags v-model="tags" type="error" :enable-del="false" :enable-add="false" size="normal" :mark='true' inverted='true'></ts-tags> ~~~ 其中v-model实现双向绑定tags. **属性说明：** | 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | value| Array| \- | 标签数组 | | size | String | normal | 大小尺寸，可选值：normal、small、large | | type | String | default | 颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色) | | disabled | Boolean | false | 是否为禁用状态 | | inverted | Boolean | false | 是否无需背景颜色（空心标签） | | circle | Boolean | false | 是否为圆角 | ## 一个可编辑的标签的例子 ``` <template> <view class="ts-column ts-flex-item ts-padding"> <view> 带删除，带添加，primary背景色 </view> <ts-tags v-model="tabData" type="error" :enable-del="showDel" :enable-add="showAdd" size="normal" :mark='false' :inverted='true' :circle="true" @add='addTag' @delete="deleteTag"></ts-tags> <view :key="index" v-for="(tag,index) in tabData"> {{index}}. {{tag}} </view> </view> </template> <script> import tsTags from '@/components/teaset/components/ts-tag/ts-tags.vue' export default { components: { tsTags }, data() { return { tabData: ['建筑', '动漫', '艺术'], // tabData: "计算机,体育", showDel: true, showAdd: true } }, methods: { clickTag: function(e) { console.log(e) }, deleteTag: function(e) { console.log(e) }, addTag: function(e) { console.log(e) console.log(this.tabData) } } } </script> <style> </style> ``` # TagSelector