Vue-Select库如何限制单个输入标签的字符数

你提到的createOption确实可以承载长度校验逻辑，但这只是兜底环节，完整实现需要两层配置，交互上也优先选择输入时限制而非事后校验。

具体实现步骤 #

• 第一层：输入环节硬限制（体验最优）
  直接通过组件提供的search插槽自定义内部输入框，加上maxlength属性，用户输入到长度上限就无法继续输入，从根源减少无效操作：

<v-select
  v-model="selected"
  :options="options"
  class="form-control"
  :id="id"
  multiple
  taggable
  :loading="loading"
  :dropdown-should-open="dropdownShouldOpen"
  placeholder="add a tag..."
  :create-option="createOption"
  :select-on-key-codes="[32]"
>
  <template #search="{ attributes, events }">
    <input
      v-bind="attributes"
      v-on="events"
      :maxlength="10"
      class="vs__search"
    />
  </template>
</v-select>

• 第二层：创建环节兜底校验
  在createOption里加长度判断，用来拦截粘贴超长文本、外部代码赋值等绕过输入框限制的场景，校验不通过返回null就会阻止标签生成，同时可以触发错误提示：

const MAX_TAG_LENGTH = 10
const createOption = (inputValue) => {
  const trimedTag = inputValue.trim()
  if (trimedTag.length > MAX_TAG_LENGTH) {
    // 替换成项目内的提示逻辑，比如toast轻提示
    console.warn(`单个标签长度不能超过${MAX_TAG_LENGTH}个字符`)
    return null
  }
  return {
    label: trimedTag,
    value: trimedTag
  }
}

交互方案选择建议 #

优先选「输入时硬限制+兜底校验」的组合，不要等用户提交标签后再弹校验：

• 输入时加maxlength完全符合用户操作直觉，不需要用户额外记忆规则，也不会出现输完才发现不符合要求需要返工的情况
• 提交后再展示校验反馈会拉长用户操作路径，属于低效的事后补救，体验很差
• 兜底校验是必要的安全层，避免异常场景下不符合规则的标签被提交入库
  如果要做体验优化，可以在输入区域旁加实时字数统计，比如输入到8个字符时显示n/10的弱提示，不用等输满才告知规则。

内容的提问来源于stack exchange，提问作者redshift