【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' }
]

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

相关推荐
福兮说3 小时前
前端下载大文件,点了按钮半天没反应:fetch + blob 的三个问题和三种替代写法
前端·javascript·性能优化·文件下载
GreenTea3 小时前
我把 Agent 的 while 循环拆掉了:一种你可能没想到的 Agent 架构
前端·后端·架构
科技观察哨4 小时前
六足平台选型与纳米定位系统集成:HEB-640六自由度位移台在半导体光刻对准中的参数边界与国产替代评估
前端·人工智能
niucloud-admin4 小时前
JAVA V6 多商户商城 开发文档——web前端
前端
颜进强4 小时前
16 · NestJS LifecycleEvents 生命周期事件:五个钩子、三条边界,和 rag-server 的优雅停机
前端·后端·ai编程
今年下半年5 小时前
【VUE】整合腾讯地图、自定义区域边界、村委名称及资产统计(放大显示资产点位)
前端·javascript·vue.js
郑州光合科技余经理6 小时前
同城电商系统:库存变更怎么同步到订单
java·开发语言·前端·后端·uni-app·php·ai编程
前端snow7 小时前
ai agent --- DeepAgents 中间件
前端
data analyse 4568 小时前
报表能自定义的国内统计工具有哪些
前端·数据分析