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

更新时间：2020-09-03 20:48:01 作者：startmvc

现在好多应用场景里会有一些需要给文章打标签等类似的操作，之前jquery用户是使用taginput

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


<el-tag
 :key="tag"
 v-for="tag in dynamicTags"
 closable
 :disable-transitions="false"
 @close="handleClose(tag)">
 {{tag}}
</el-tag>
<el-input
 class="input-new-tag"
 v-if="inputVisible"
 v-model="inputValue"
 ref="saveTagInput"
 size="small"
 @keyup.enter.native="handleInputConfirm"
 @blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

<style>
 .el-tag + .el-tag {
 margin-left: 10px;
 }
 .button-new-tag {
 margin-left: 10px;
 height: 32px;
 line-height: 30px;
 padding-top: 0;
 padding-bottom: 0;
 }
 .input-new-tag {
 width: 90px;
 margin-left: 10px;
 vertical-align: bottom;
 }
</style>

<script>
 export default {
 data() {
 return {
 dynamicTags: ['标签一', '标签二', '标签三'],
 inputVisible: false,
 inputValue: ''
 };
 },
 methods: {
 handleClose(tag) {
 this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
 },

 showInput() {
 this.inputVisible = true;
 this.$nextTick(_ => {
 this.$refs.saveTagInput.$refs.input.focus();
 });
 },

 handleInputConfirm() {
 let inputValue = this.inputValue;
 if (inputValue) {
 this.dynamicTags.push(inputValue);
 }
 this.inputVisible = false;
 this.inputValue = '';
 }
 }
 }
</script>

这个是官方文档给的实例，这样可以解决单一标签输入。但是实际场景中，好多用户是通过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 = '';
}

效果：