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
Step to reproduce
- 打开 Select(或 BaseSelect)组件的「多选」示例页面(pc 端 multiple demo,影响 base-select 与 select 两个组件的示例)
- 在场景 4「多选个数限制」中选择选项:配置了
:multiple-limit="2",当尝试选择第 3 个选项时会被拒绝,符合预期
- 在场景 5「自定义图标 + 自定义样式」中,连续选择 3 个及以上的选项(该场景未配置数量限制,可以正常选中)
- 再次查看场景 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
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
Step to reproduce
:multiple-limit="2",当尝试选择第 3 个选项时会被拒绝,符合预期What is expected
:multiple-limit="2"的限制What is actually happening
v-model="value4",两者双向绑定同一份选中数据: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