AntdVue 输入框转化为小便签：使用 a-tag 组件实现

您可以使用 antdvue 中的 a-tag 组件，将 a-input 输入框的内容绑定到 a-tag 上，从而实现将输入框内容转换为小便签的效果。以下是示例代码：

<template>
  <div>
    <a-input v-model='inputValue' @pressEnter='addTag' />
    <div>
      <a-tag v-for='(tag, index) in tagList' :key='index' closable @close='removeTag(index)'>
        {{ tag }}
      </a-tag>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      tagList: []
    };
  },
  methods: {
    addTag() {
      const tag = this.inputValue.trim();
      if (tag && !this.tagList.includes(tag)) {
        this.tagList.push(tag);
        this.inputValue = '';
      }
    },
    removeTag(index) {
      this.tagList.splice(index, 1);
    }
  }
};
</script>

在上述代码中，我们通过双向绑定实现了将 a-input 的输入内容绑定到 inputValue 变量上，同时在输入框按下回车键时调用 addTag 方法将输入内容添加到 tagList 数组中。tagList 数组中的每个元素都对应一个 a-tag 组件，用于展示小便签的内容。在 a-tag 组件上设置 closable 属性，使其可以被关闭。当用户关闭 a-tag 组件时，调用 removeTag 方法将对应的 tag 从 tagList 数组中删除。