元素用户界面标签组件实现多标签生成的方法示例

现在好多应用场景里会有一些需要给文章打标签等类似的操作，之前框架用户是使用标记输入来实现，使用VUE以后elementui有一个组件非常简单就是标签组件。

El-Tag :键=' Tag ' v-for=' Tag in dynamic tags ' closed : disable-transitions=' false ' @ close=' handleClose(Tag)' { { Tag } }/El-tagel-input class=' input-New-Tag ' v-if=' input visible ' v-model=' input value ' ref=' savagetinput ' size=' small ' @键向上。进入。native=' handleinput confirm ' @ blur=' handleinput confirm ' El-tag .El-tag { margin-left : 10px；} .button-new-tag { margin-left : 10px；高度： 32px线高： 30px填充-top : 0；填充-底部： 0；} .input-new-tag { width : 90px；左边距left: 10px垂直对齐： 底部；}/stylescript导出默认{ data(){ return { dynamic tags :['标签一', '标签二', '标签三]，inputVisible: false，输入值e : ' ' }；}，methods: { handleClose(标记){这个。动态标签。拼接(这个。动态标签。indexof(标记),1);}，showInput(){ this。inputvisible=true这个$nextTick(_={ this .参考文献。保存输入。参考文献。输入。焦点()；});}，handleInputConfirm(){ let inputValue=this。inputValueif(输入值){ this。动态标签。推送(输入值)；} this . inputvisible=false this . inputvalue=} } }/脚本这个是官方文档给的实例，这样可以解决单一标签输入。但是实际场景中，好多用户是通过ctrl c，ctrl v的方式输入的，有可能还会一起粘贴好多行的标签，更有可能从超过中复制出来。

那我一一解决一下这样一个场景

首先，先改一下样式，让文本框变长：El-tag { margin-right : 10px；}.el-tag .El-tag { margin-right : 10px；} .按钮-新标签{ height: 32px线高： 30px填充-top : 0；填充-底部： 0；} .输入-新标签{垂直-对齐：底部；}接着，修改一下进入和虚化事件：

handleInputConfirm(){ let inputValue=this。inputValueif(InputValue){ var values=InputValue。拆分(/[，\n]/).过滤器（项目={返回项目！物品！=undefined })值。foreach(element={ var index=this。动态标签。find index(I={ return I==element })if(index 0){ this。动态标签。push(元素)；} });} this . input visible=false this . input value=}效果：

阿大发空中情况指示器

三大发舒服，

阿斯顿发撒地方。阿斯顿发，阿斯顿发，阿斯顿发，阿斯顿发安抚，阿斯顿发是淡淡的点点滴滴方法，阿斯顿发撒地方，adfasd

我们把以上文字复制粘贴进去

所有去重，拆分都好的，那们在试一下，从超过中复制

完成。希望能够帮到有需要的朋友。也希望大家多多支持我们。