<template>
  <div class="box">
    <p class="lable">正向詞</p>
    <div class="main border">
      <div v-for="(item, index) in list.list" :key="index" v-if="list.list.length" class="item">
        <span>{{item}}</span>
        <span @click="deleteItem(index)">×</span>
      </div>
      <input v-model="value" type="text" placeholder="" @keyup.enter="enterHandler" class="input_" />
      <p class="error_box"></p>
    </div>
    <p class="btn">新增</p>
  </div>
</template>
 

import { reactive, ref } from 'vue';
interface List {
  list:string[]
}
const list = reactive<List>({list:[]})
const value = ref('')
const enterHandler = () => {
  if (!value.value.length || !value.value.trim().length) return
  list.list.push(value.value)
  value.value = ''
}
const deleteItem = (index:number) => {
  list.list.splice(index, 1)
}
 

.box {
  display: flex;
  width: auto;
  margin: 150px auto;
  width: 716px;
  .lable {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #888888;
    margin: 0 42px 0 0;
    height: 32px;
    line-height: 32px;
  }
  .border {
    border: 1px solid #1492FF;
  }
  .err_border {
    border: 1px solid #FE5332;
  }
  .main {
    width: 550px;
    min-height: 30px;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: 8px;
    border-radius: 2px;
    padding-left: 10px;
    display: flex;
    flex-wrap: wrap;
    .item {
      padding: 0 6px 0 8px;
      height: 22px;
      margin: 4px 0;
      line-height: 22px;
      font-size: 14px;
      margin-right: 8px;
      border-radius: 2px;
      border: 1px solid #EFEFEF;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      span:nth-child(1) {
        font-family: MicrosoftYaHeiUI;
        color: #333333;
        background: #FAFAFA;
      }
      span:nth-child(2) {
        margin-left: 6px;
        color: #bbb;
        cursor: pointer;
        font-size: 16px;
        &:hover {
          color: #1492FF;
        }
      }
    }
    .input_ {
      width: auto;
      height: 30px;
      border: none;
      min-width: 200px;
      &:focus-visible {
        border: none;
        outline:none;
      }
      &:focus {
        border: none;
        outline:none
      }
    }
  }
  .btn {
    width: 74px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background-color: #1492FF;
    color: #fff;
    border-radius: 2px;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI;
    color: #FFFFFF;
    cursor: pointer;
    user-select: none;
  }
}
 

效果圖：