【Picker】单选多选

已创建支持单选/多选的 Picker 组件!

组件路径 : components/Picker/Picker.vue

使用方式:

vue 复制代码
<!-- 单选模式 -->
<Picker 
  v-model="selectedValue" 
  title="服务类型" 
  :options="serviceTypes" 
  placeholder="请选择服务类型" 
/>

<!-- 多选模式 -->
<Picker 
  v-model="selectedValues" 
  title="选择消杀区域" 
  :options="areas" 
  :multiple="true" 
  placeholder="请选择消杀区域" 
  :required="true"
/>

属性说明:

属性 类型 默认值 说明
value Array \[\] 选中的值(单选时数组长度为1)
title String '' 标题
options Array \[\] 选项列表,格式:[{ label: '选项1', value: '1' }]
multiple Boolean false 是否多选
placeholder String '请选择' 占位符
required Boolean false 是否必填(显示红色星号)
optionKey String 'value' 选项值的键名

示例数据:

javascript 复制代码
serviceTypes: [
  { label: '常规消杀', value: 'normal' },
  { label: '专项消杀', value: 'special' },
  { label: '应急消杀', value: 'emergency' }
]

组件采用了与项目一致的蓝色主题风格,弹窗底部弹出,支持点击遮罩关闭。

相关推荐
是立不是利2 小时前
写给设计师的 CSS 博客美学指南
前端·css
dsyyyyy11012 小时前
JS复习,难点,易错点总结
开发语言·javascript·ecmascript
默_笙2 小时前
🏝 Docker 就是"房地产开发":从施工图纸到小区物业的容器化指南
前端·javascript
计算机魔术师2 小时前
Rohan Paul 谈用时间跨度衡量智能体能力,并引用 OpenAI 自动化研究实习生里程碑
前端
kyriewen2 小时前
我手写了个极简版 React Router——才搞懂 v6 为什么砍了这么多 API
前端·javascript·程序员
a1117762 小时前
Shirone 二次元博客主题 开源
前端·开源
IT_陈寒3 小时前
Python的切片赋值把我坑惨了,这不是bug是特性
前端·人工智能·后端
掘金酱3 小时前
【社区公告】致每一位掘友:关于这次调整, 想再说几句
前端·人工智能
CoderLiu3 小时前
程序化工具调用(PTC)与动态工作流引擎:深入大模型工具调用的架构演进与实践
前端·人工智能·后端
码农胖大海3 小时前
我的第一个产品,只有一段提示词
前端·ai编程·产品