# 标签编辑 考虑编程实现以下功能： > 在界面设计中设计标签编辑组件需要一次性录入多个标签，但是手工录入或者导入的数据可能不一致，需要进行容错设计。 * [ ] 批量添加（编辑）标签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> ```