ElementUI Tag功能实现多标签生成

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

 ElementUi官方给出的的示例：

 1 tag
 2   :key="tag"
 3   v-for="tag in dynamicTags"
 4   closable
 5   :disable-transitions="false"
 6   @close="handleClose(tag)">
 7   {{tag}}
 8 
 9 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 
19 else class="button-new-tag" size="small" @click="showInput">+ New Tag
20 
21 
38 
39 

但是实际项目中Tag显示的内容是需要弹框选择的，代码如下：

 1 

 2             tag
 3               :key="tag"
 4               v-for="tag in dynamicTags"
 5               closable
 6               :disable-transitions="false"
 7               @close="handleClose(tag)">
 8               {{tag}}
 9             
10             dialog
11               width="30%"
12               append-to-body
13               :visible.sync="inputVisible">
14               picker
15                 is-range
16                 v-model="tagTime"
17                 format="HH:mm:ss"
18                 value-format="HH:mm:ss"
19                 range-separator="至"
20                 start-placeholder="开始时间"
21                 end-placeholder="结束时间"
22                 placeholder="选择时间范围">
23               
24               
25                 取 消
26                 确 定
27               
28             
29 
30             
31             
32           

data中加入：

1 dynamicTags: [],
2 inputVisible: false,
3 inputValue: "",
4 tagTime: [new Date(), new Date()]        

methods方法中代码如下：

 1 handleClose(tag) {
 2       this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
 3     },
 4     showInput() {
 5       this.inputVisible = true;
 6     },
 7     tagTimeClick(tagTime) {
 8       console.log(tagTime, "tegTime");
 9       let inputValue = tagTime[0] + "-" + tagTime[1];
10       console.log(inputValue);
11       if (inputValue) {
12         this.dynamicTags.push(inputValue);
13       }
14       this.inputVisible = false;
15     },

共勉：“人生如果错了方向，停止就是进步”