Skip to content

🐛 [Bug]: [base-select][select] 多选 demo 中"多选个数限制"与"自定义图标+自定义样式"共用 v-model,导致限制失效 #4285

Description

@chujieHong

Version

latest

Vue Version

latest

Link to minimal reproduction

https://opentiny.design/tiny-vue/zh-CN/os-theme/components/base-select
https://opentiny.design/tiny-vue/zh-CN/os-theme/components/select

Image Image

Step to reproduce

  1. 打开 Select(或 BaseSelect)组件的「多选」示例页面(pc 端 multiple demo,影响 base-select 与 select 两个组件的示例)
  2. 在场景 4「多选个数限制」中选择选项:配置了 :multiple-limit="2",当尝试选择第 3 个选项时会被拒绝,符合预期
  3. 在场景 5「自定义图标 + 自定义样式」中,连续选择 3 个及以上的选项(该场景未配置数量限制,可以正常选中)
  4. 再次查看场景 4「多选个数限制」,此时它显示已选中 3 个以上的选项,突破了「最多选择 2 个」的限制

根因:场景 4 与场景 5 共用同一个 v-model="value4",场景 5 的选中结果会直接写入场景 4 的模型,导致限制 demo 展示出超过限制数量的选中项。

What is expected

  • 场景 4「多选个数限制」在任何情况下都最多只能显示和选中 2 个选项,严格遵循 :multiple-limit="2" 的限制
  • 场景 5「自定义图标 + 自定义样式」与场景 4 互不影响,在场景 5 中的多选操作不会改变场景 4 的选中状态
  • 两个场景应有各自独立的 v-model,各自展示各自的选择结果

What is actually happening

  • 场景 4 与场景 5 共用同一个 v-model="value4",两者双向绑定同一份选中数据
  • 在场景 5「自定义图标 + 自定义样式」中选中 3 个及以上选项后,场景 4「多选个数限制」也会同步显示 3 个及以上的已选标签
  • 此时场景 4 展示出的选中数量突破了它自身标明的 :multiple-limit="2"(最多选择 2 个)限制,与场景描述不符

What is your project name

N/A

Any additional comments (optional)

在演示 BaseSelect 组件的多选功能时,先在「自定义图标 + 自定义样式」场景中连续选中了 3 个选项,随后发现「多选个数限制」场景也显示为 3 个已选标签,与其「最多选择 2 个」的说明矛盾。排查后发现是示例代码中两个场景误用了同一个 v-model 导致。

该问题同时存在于 BaseSelect 与 Select 两个组件的「多选」示例中(pc 端 options API 与 composition-api 共 5 个示例文件),属于示例代码层面的问题,组件本身在直接交互时能正确拦截超出限制的选择。

已提交pr

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions