vue添加标签的实现

<template>
  <div style="color: white">
    <div>关键词组：</div>
    <div class="add-input" v-for="(item, index) in updataData" :key="index">
      <div style="flex: 1">
        <input
          @click="updasea(item.name, index)"
          @input="updasea(item.name, index)"
          @blur="blurFun(item.name, index)"
          ref="updasea"
          trim
          type="text"
          class="item-input two"
          v-model="item.name"
        />
      </div>

      <div class="icon-add">
        <div @click="updataadd(index)" v-if="index == updataData.length - 1">
          +
        </div>
        <div @click="updatadel(index)" v-else>-</div>
      </div>
    </div>
    <div class="text-tab-box">
      <div class="text-tab-box-title">
        <!-- <img src="@/assets/images/icon-title.png" alt="" /> -->
        <span>已选关键词</span>
      </div>
      <div class="text-tab-box-tag">
        <div v-for="(item, index) in updataData_arr" :key="index">
          <span v-for="(subItem, subIndex) in item" :key="subIndex">
            <el-tag
              size="small"
              closable
              v-if="subItem"
              @close="updataClose(index, subIndex)"
              :disable-transitions="true"
              >{{ subItem }}</el-tag
            >
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: "",
      updataData: [{ name: "" }],
      updataData_arr: [],
    };
  },
  methods: {
    updataadd(index) {
      this.updataData.push({ name: "" });
      this.updataicon = true;
    },
    updatadel(index) {
      this.updataData.splice(index, 1);
      this.updataData_arr.splice(index, 1);
      this.updataicon = true;
    },
    updataClose(index, subIndex) {
      if (this.updataData_arr[index].length == 1) {
        if (this.updataData.length == 1) {
          this.updataData = [{ name: "" }];
        } else {
          this.updataData.splice(index, 1);
        }
        this.updataData_arr.splice(index, 1);
      } else {
        this.updataData_arr[index].splice(subIndex, 1);
        this.updataData[index].name = this.updataData_arr[index].join(",");
      }
    },
    blurFun(val, index) {
      this.$nextTick(() => {
        this.updataData_arr[index] = val.split(",");
        this.$forceUpdate();
      });
    },
    updasea(val, index) {
      this.$nextTick(() => {
        this.$refs.updasea[index].focus();
        this.updataData_arr[index] = val.split(",");
      });
    },
  },
};
</script>

<style>
</style>