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

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

相关推荐
云飞云共享云桌面5 小时前
传统工作站 vs 云飞云共享云桌面:制造业设计云桌面选型深度对比
运维·服务器·前端·网络·3d·架构·制造
UXbot5 小时前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app
llz_1125 小时前
web-第四次课后作业
前端·spring boot·web
武清伯MVP6 小时前
前端跨域方案大合集
前端·javascript
一杯奶茶¥6 小时前
基于springboot的失物招领管理系统带万字文档 校园失物招领管理系统 失物认领管理系统java springboot vue
java·vue.js·spring boot·java项目
小刘|7 小时前
Spring AI Alibaba 集成和风天气 API 实战
java·服务器·前端
星星在线7 小时前
我是怎么把页面图片流量砍掉一半的
前端·javascript
木叶子---8 小时前
前端打包出错
前端·人工智能·tensorflow
JAVA面经实录9178 小时前
前端系统化学习计划表(含完整知识思维导图)
前端·学习
本末倒置1838 小时前
开发了一个所见所得的md编辑器,致敬Typora大佬
前端