如何实现Tag输入框失焦(FocusOut)时自动完成标签转换？

API 探路者

2026-8-4

解决方案

要实现Tag输入框失焦时自动转换输入内容为标签，需完成绑定失焦事件、实现标签转换逻辑两步，同时保留原有提交验证逻辑不变。

1. 给Tag输入框绑定失焦事件

假设基于Vue框架（从代码中的this.field推断），在模板中给输入框添加@focusout事件监听：

<!-- 根据实际组件调整标签名和绑定值 -->
<tag-input 
  @focusout="handleTagBlur" 
  v-model="formData[field.field]"
/>

2. 实现失焦事件处理函数

在组件的methods中添加handleTagBlur方法，负责将输入框未提交的文本转为标签：

handleTagBlur(event) {
  // 仅处理Tag类型字段
  if (this.field.dataType !== FieldType.Tag) return;

  // 获取输入框当前文本并去空格
  const inputText = event.target.value.trim();
  if (!inputText) return;

  // 获取当前已存在的标签数组（空数组兜底）
  const currentTags = this.formData[this.field.field] || [];
  
  // 避免添加重复标签
  if (!currentTags.includes(inputText)) {
    this.formData[this.field.field] = [...currentTags, inputText];
  }

  // 清空输入框内容
  event.target.value = '';
}

3. 保留原有提交验证逻辑

你提供的validateBeforeSubmit方法负责将标签数组转为后端需要的逗号分隔字符串，无需修改，提交时正常调用即可：

validateBeforeSubmit(value: Object) {
    const _value = { ...value };
    if (this.field.dataType === FieldType.Tag && _value) {
      let newValue = '';
      _value[this.field.field].forEach((el, idx) => {
        if (idx > 0) {
          newValue += ',' + el;
        } else {
          newValue += el;
        }
      });
      _value[this.field.field] = newValue;
    }
    return _value;
}