ElementUI Tag組件實(shí)現(xiàn)多標(biāo)簽生成的方法示例

更新時(shí)間：2019年07月08日 09:34:40 作者：GavinSir

這篇文章主要介紹了ElementUI Tag組件實(shí)現(xiàn)多標(biāo)簽生成的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

現(xiàn)在好多應(yīng)用場(chǎng)景里會(huì)有一些需要給文章打標(biāo)簽等類似的操作，之前jquery用戶是使用taginput來實(shí)現(xiàn)，使用VUE以后elementui有一個(gè)組件非常簡(jiǎn)單就是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: ['標(biāo)簽一', '標(biāo)簽二', '標(biāo)簽三'],
    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>

這個(gè)是官方文檔給的實(shí)例，這樣可以解決單一標(biāo)簽輸入。但是實(shí)際場(chǎng)景中，好多用戶是通過ctrl+c，ctrl+v的方式輸入的，有可能還會(huì)一起粘貼好多行的標(biāo)簽，更有可能從excel中復(fù)制出來。

那我一一解決一下這樣一個(gè)場(chǎng)景

首先，先改一下樣式，讓文本框變長(zhǎng)：

.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 = '';
}

效果：