Arco Design的标签输入框 InputTag 如何实现失焦保存

今天遇到一个bug，目前项目是用Arco Design+Vue3+TypeSrcipt搭建的，在项目中有使用到Arco Design的标签输入框InputTag，我是如下写的，但是发现输完之后只有按Enter键可以保存，其他方式都不可以（包括但不限于blur，change）。

js 复制代码

<template>
    <a-form :model="list">
        <a-form-item
          field="keywords"
          label="标签列表"
        >
          <a-input-tag
            v-model="list.keywords"
            placeholder="输入关键词"
            allow-clear
          />
        </a-form-item>
    </a-form>
</template>

然后我就去查看了Arco Design的官方文档，发现他是有一个InputValue这个参数的，而他的事件中，@change和@blur是取不到这个值的。

然后我继续查看他的属性，发现他是有一个属性 =》 input-value，用来获取输入框的值，我试图用这个属性搭配@blur事件来实现失焦保存，但是发现一旦输入框失焦，input-value 的值立刻清空了。

于是我又开始看API，发现他还有一个属性 =》 retain-input-value，用来保留输入框的内容，我试图用这两个属性搭配@blur事件实现，但是仍然不行。具体情况为我点击了输入框，但是什么都没输入，他保留了undefined，并push进了keywords。

然后我通过动态化retain-input-value的值并通过if判断来根据input-value的值做不同的操作，来达到效果，于是我使用watch来监听当前输入框的值。我以为问题终于解决，但是，此时的我忽略了按Enter键的情况，当我保存当前输入框中的值，却是通过Enter键保存时，那么虽然当前值被push进了keywords，但是他的值并未清空，所以又加入了一个@press-enter事件来处理该种情况，最终得以解决。具体代码如下，仅供参考：

js 复制代码

<template>
    <a-form :model="list">
        <a-form-item
          field="keywords"
          label="标签列表"
        >
          <a-input-tag
            v-model="list.keywords"
            v-model:inputValue="inputTag"
            placeholder="输入关键词"
            allow-clear
            :retain-input-value="isInputTagSave"
            @blur="saveInputTag"
            @press-enter="clearInputTag"
          />
        </a-form-item>
    </a-form>
</template>

js 复制代码

<script lang="ts" setup>
    const list=ref<any>({
        keywords:[],
    });
    const inputTag = ref(); // 获取标签输入框的值
    const isInputTagSave = ref(true); // 是否保留标签输入框的内容
    // 用键盘保存之后，因为没有涉及到标签输入框值的改变，所以保存之后不仅存在标签，旧值也存在，需要清空
    const clearInputTag = () => {
      inputTag.value = '';
    };
    // 标签输入框的失焦事件，失去焦点时，将输入框的值push进标签列表，并清空，如果本身为空，则不push
    const saveInputTag = () => {
      if (!(inputTag.value === undefined || inputTag.value === '')) {
        automaticList.value.keywords.push(inputTag.value);
        inputTag.value = '';
      }
    };
    // 监听当前标签输入框的值，动态改变是否需要保存当前值；不为空时需要，为空时不需要
    watch(inputTag, (newVal, oldVal) => {
      if (newVal === undefined || newVal === '') {
        isInputTagSave.value = false;
      } else {
        isInputTagSave.value = true;
      }
    });
</script>