vue 使用原生input输入框结合el-tag标签实现添加多个字段完成表单搜索功能

代码直接CV即可，后期更新el-input使用

<template>
  <div class="contaion" @click="onclick">
    <!-- 生成的标签 -->
    <div v-for="(item, index) in AllTags" :key="index" class="spanbox">
      <span class="tagspan">{
  
  { item }}</span>
      <i class="iClose" @click="removeTag(item,index)"></i>
    </div>
    <!-- 输入框 -->
    <input
      placeholder="输入后按<回车>创建"
      v-model="inputValue"
      @keyup.enter="addTags"
      :style="inputStyle"
      class="inputTag"
      ref="inputTag"
      type="text"
    />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      //输入框
      inputValue: "",
      //tag
      AllTags: ["标签1", "标签2"],
      //输入框宽度
      inputLength: "",
      //计算删除位置
      n: 0,
    };
  },
  watch: {
    //监听输入的值越多，输入框越长
    inputValue(val) {
      // 实时改变input输入框宽度，防止输入内容超出input默认宽度