[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