input 回车生成tag标签

            <!-- 父盒子 -->
          <div class="father_box" @click="onclick">
            <!-- 生成的标签 -->
            <div v-for="(item, index) in node.data.TagsAll" :key="index" class="spanbox">
              <span class="tagspan">{{ item }}</span>
              <i class="span_close" @click="removeTag(index, item, node.data)"></i>
            </div>
            <!-- 输入框 
              @keyup.delete="deleteTags"-->
            <input
              placeholder="输入后按<回车>创建"
              v-model="node.data.value"
              @keyup.enter="addTags(node)"
              :style="inputStyle"
              class="inputTag"
              ref="inputTag"
              type="text"
            />
          </div>

methods： {
     //删除tag
    removeTag(index, item, node) {
      node.TagsAll.splice(index, 1);
    },

    //回车增加tag
    addTags(node) {

      if (node.data.value) {

          //添加tag
          node.data.TagsAll.push(node.data.value);

          //清空输入框
          node.data.value = "";
      }
    },

    //点击父盒子输入框获取焦点
    onclick() {
      //   console.log(2345);
    },

}

开始用el-input生成的tag 标签，但是产品觉得看着别扭---就又改的input框回车生成tag...也差了些资料，这里单独做个文案记录。如有哪里疑惑可以参照el-tree添加条件