ElementUI Tag功能实现多标签生成

做项目过程中需要通过选择内容实现Tag多标签功能，效果如下：

 

 ElementUi官方给出的的示例：

 1 <el-tag
 2   :key="tag"
 3   v-for="tag in dynamicTags"
 4   closable
 5   :disable-transitions="false"
 6   @close="handleClose(tag)">
 7   {{tag}}
 8 </el-tag>
 9 <el-input
10   class="input-new-tag"
11   v-if="inputVisible"
12   v-model="inputValue"
13   ref="saveTagInput"
14   size="small"
15   @keyup.enter.native="handleInputConfirm"
16   @blur="handleInputConfirm"
17 >
18 </el-input>
19 <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
20 
21 <style>
22   .el-tag + .el-tag {
23     margin-left: 10px;
24   }
25   .button-new-tag {
26     margin-left: 10px;
27     height: 32px;
28     line-height: 30px;
29     padding-top: 0;
30     padding-bottom: 0;
31   }
32   .input-new-tag {
33     width: 90px;
34     margin-left: 10px;
35     vertical-align: bottom;
36   }
37 </style>
38 
39 <script>
40   export default {
41     data() {
42       return {
43         dynamicTags: ['标签一', '标签二', '标签三'],
44         inputVisible: false,
45         inputValue: ''
46       };
47     },
48     methods: {
49       handleClose(tag) {
50         this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
51       },
52 
53       showInput() {
54         this.inputVisible = true;
55         this.$nextTick(_ => {
56           this.$refs.saveTagInput.$refs.input.focus();
57         });
58       },
59 
60       handleInputConfirm() {
61         let inputValue = this.inputValue;
62         if (inputValue) {
63           this.dynamicTags.push(inputValue);
64         }
65         this.inputVisible = false;
66         this.inputValue = '';
67       }
68     }
69   }
70 </script>

View Code