# 標簽編輯 考慮編程實現以下功能： > 在界面設計中設計標簽編輯組件需要一次性錄入多個標簽，但是手工錄入或者導入的數據可能不一致，需要進行容錯設計。 * [ ] 批量添加（編輯）標簽Tags，兩個標簽之間使用分隔符分隔，系統轉換為數組。 * [ ] 支持多種分隔符號，例如英文和中文的逗號，分號，|等都要兼容（容錯） * [ ] 多次輸入的數據拼接成一個數組。 測試數據：計算機，電腦，，程序;數據；| 測試 以上解析為：計算機,電腦,程序數據,測試 # 參考設計 * [ ] 根據給定的字符串解析標簽數組 * [ ] 合并兩個標簽數組 * [ ] 去重 以下實現基于iView的Tag組件 使用的效果如圖所示：  ``` <template> <div> <Tag v-for="tag in tags" :key="tag" :name="tag" type="border" :closable="closable" :color="color" @on-close="removeTag">{{tag}} </Tag> <Input v-if="closable" placeholder="標簽" v-model="newTag" style="width: 150px;" size="small"></Input> <Button v-if="closable" icon="ios-add" type="dashed" size="small" @click="doAddNewTag">添加</Button> </div> </template> <script> export default { name: 'Tags', props: { value: { type: Array, default() { return []; }, }, closable: { type: Boolean, default: false, }, color: { type: String, default: 'default', }, type: { type: String, default: 'border', }, }, data() { return { newTag: '', tags: this.value, }; }, watch: { value(val) { this.tags = val; }, tags(val) { this.$emit('input', val); }, }, methods: { /** * 合并兩組標簽，并去重 * @param {Array} tags1 * @param {Array} tags2 */ mergeTags(tags1, tags2) { let newTagList = []; newTagList = newTagList.concat(tags1, tags2); let set = new Set(newTagList); return [...set]; }, /** * 將標簽字符串轉換為標簽數組，支持多種分隔符號 * @param {String} tagString */ createTags(tagString) { let newTag = tagString.trim(); // 匹配中文的和英文的逗號和分好作為分隔號，支持：,;#，； // 考慮英文但此間可能有空格，所以不能用空格間隔 const regex = /,|;|，|；|#/; let newTags = newTag.split(regex).map((val) => { return val.trim(); //去掉每個標簽的首尾空格 }); let set = new Set(newTags); //標簽去重 set.delete('');//去掉零長度字符串 return [...set]; //輸出數組形式 }, removeTag(event, name) { const index = this.tags.findIndex((tag) => { return tag === name; }); this.tags.splice(index, 1); }, doAddNewTag() { let newTag = this.newTag.trim(); if (newTag === '') { this.$Message.error('請輸入標簽內容'); } else { let tags = this.createTags(newTag); this.tags = this.mergeTags(this.tags, tags); } this.newTag = ''; }, }, }; </script> <style scoped> </style> ```