ElementUITag组件实现多标签生成的方法示例

现在好多应⽤场景⾥会有⼀些需要给⽂章打标签等类似的操作，之前jquery⽤户是使⽤taginput来实现，使⽤VUE以后elementui有⼀个组件⾮常简单就是tag组件。

v-for=\"tag in dynamicTags\" closable

:disable-transitions=\"false\" @close=\"handleClose(tag)\"> {{tag}}class=\"input-new-tag\" v-if=\"inputVisible\" v-model=\"inputValue\" ref=\"saveTagInput\" size=\"small\"

@keyup.enter.native=\"handleInputConfirm\" @blur=\"handleInputConfirm\">

+ New Tag

这个是官⽅⽂档给的实例，这样可以解决单⼀标签输⼊。但是实际场景中，好多⽤户是通过ctrl+c，ctrl+v的⽅式输⼊的，有可能还会⼀起粘贴好多⾏的标签，更有可能从excel中复制出来。那我⼀⼀解决⼀下这样⼀个场景⾸先，先改⼀下样式，让⽂本框变长：

.el-tag{

margin-right: 10px;}

.el-tag + .el-tag { margin-right: 10px; }

.button-new-tag { height: 32px; line-height: 30px; padding-top: 0; padding-bottom: 0; }

.input-new-tag {

vertical-align: bottom; }

接着，修改⼀下enter和blur事件：

handleInputConfirm() {

let inputValue = this.inputValue; if (inputValue) {

var values = inputValue.split(/[,， \\n]/).filter(item=>{ return item!='' && item!=undefined })

values.forEach(element => {

var index = this.dynamicTags.findIndex(i=>{ return i==element })

if(index<0){

this.dynamicTags.push(element); } }); }

this.inputVisible = false; this.inputValue = '';}

效果：

阿⼤发asd

三⼤发舒服，

阿斯顿发撒地⽅。

阿斯顿发，阿斯顿发，，阿斯顿发，，阿斯顿发安抚，阿斯顿发 是淡淡的 点点滴滴⽅法，阿斯顿发撒地⽅,adfasd我们把以上⽂字复制粘贴进去

所有去重，拆分都OK，那们在试⼀下，从excel中复制

完成。希望能够帮到有需要的朋友。也希望⼤家多多⽀持。