【Picker】单选多选

智商不够_熬夜来凑2026-05-24 19:06

已创建支持单选/多选的 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' }
]

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