# QS-picker **Repository Path**: QS-UI/QS-picker ## Basic Information - **Project Name**: QS-picker - **Description**: No description available - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-03-30 - **Last Updated**: 2021-03-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 可直接拖进项目运行 ## QQ交流群: 750104037 [点我加入](https://jq.qq.com/?_wv=1027&k=5OyZoXa) --- ## 作者想说 如果该插件有什么问题还请大家说出来哦，还有如果有什么建议的话也可以提下呐 ~ 如果觉得好用，可以回来给个五星好评么~~(❁´◡`❁)\*✲ﾟ\* 蟹蟹~拜托啦~ --- ## 组件简介 提取了inputs组件的picker类型合集，参考了Color-Ui的模态框展示方式 ### 该插件在支付宝小程序不能运行, 推荐使用[QS-inputs-split](https://ext.dcloud.net.cn/plugin?id=652)中的picker，兼容性更强，并且更好用 --- # 更新说明 | 版本号| 更新说明| | --------- | :-------- | | 1.7| 修改date默认格式为/ | | 6.0| 修复date类型下设置dateFormatArray无效问题 | | 5.0| 1、新增mode、zIndex、lineHeight、bgColor_title、autoHide、titleColor、contentColor等属性 详见1.
2、buttonSet中 新增 cancleColor、confirmColor等属性 详见1.0.2 | | 4.0| 修复从后端获取数据拼接赋值后不能使用问题 | | 3.0| 1、废弃show属性，展示方式请使用ref调用show方法
2、新增title属性，为picker的标题， title文字的大小为picker内的文字大小系数上加.002
3、优化button按钮的文字大小为picker内的文字大小系数上加.005
4、新增并更改@showQSPicker、@hideQSPicker为picker显示或隐藏时的回调 | | 2.0| 1、新增showReset属性（每次显示是否重置）
2、修复date类型
3、完善文档 | --- ## 显示picker：this.$refs.自定义的ref名称.show(); ## 隐藏picker：this.$refs.自定义的ref名称.hide(); (一般不用，选择后自动隐藏) # 1. 传给QS-picker的属性 | 属性名| 是否必填| 值类型| 默认值| 说明| | --------- | -------- | -----: | --: | | ~~show（废弃, 请使用ref调用show方法）~~| 是| Boolean| `false`| 控制picker显示或隐藏 | | type| | String | | picker的类型, 详见1.0.0 | | dataSet| | Object| | 各类型携带的数据, 详见1.0.1 | | pickerId| | String| | 自定义的picker标识 | | height| | Number | `.3` | picker的高度, 设备的高度乘以此数值 | | indicator_style| | String| `'height:' + (Sys.screenHeight*.09) + 'px;'` | picker的单行样式 | | fontscale| | Number | `.02` | picker内的字体大小, 设备高度乘以此数值 | | width| | Number | `.8` | picker的宽度, 设备宽度乘以此数值 | | fontscale| | Number | `.02` | picker内的字体大小, 设备高度乘以此数值 | | buttonSet| | Object| | 按钮设置, 详见1.0.2 | | @hideQSPicker| 是| Function| | 取消或确定选择的隐藏picker回调 | | @showQSPicker| 是| Function| | 取消或确定选择的隐藏picker回调 | | @confirm| 是| Function| | 确定选择时的回调, 携带用户选择的数据并自动触发@hideQSPicker | | showReset(2.0新增)| | Boolean| | 每次显示时是否重置picker的value为初始化 | | title(3.0新增)| | String| | picker的标题 | | `v5.0新增` | | | | | mode| | String| `middle` | 展示模式, 详见 1.0.3 | | zIndex| | Number\|String| `9999` | z-index属性 | | lineHeight| | Number| `.09` | picker内单行高度系数 | | bgColor_title| | Color| `#F8F8F8` | title块背景颜色 | | autoHide| | Boolean| `true` | 用户确定选择后是否自动隐藏 | | titleColor| | Color| `#999` | title的文字颜色 | | contentColor| | Color| `black` | picker-view内的文字颜色 | ## 1.0.0 type属性说明 | 值| 说明| | --------- | -------- | | date| 日期时间 | | city| 省市区 | | provincialStreet| 省市区乡镇街道| | custom| 自定义| | custom2| 自定义2， 比custom返回数据更简单| ## 1.0.1 dataSet属性说明 ### 1.0.1.0.1 `date类型` | 属性名| 是否必填| 值类型| 默认值| 说明| | --------- | -------- | -----: | --: | | startYear| | Number| `new Date().getFullYear() - 5` | 开始年数 | | endYear| | Number| `new Date().getFullYear() + 5` | 结束年数 | | defaultValue| | String| 此刻| 格式为`2019/05/27 10:54:00`、`2019/05/27`的初始日期 | | dateMode| | Number | `3`| 取值为1-6的值，依次从左向右为年、月、日、时、分、秒的列数 | | dateFormatArray| | Array| `['-', '-', ' ', ':', ':']`| 确认选择后返回的格式，依次是年、月、日、时、分、秒之间的分隔符 | 示例代码: ```javascript { startYear: 2018, endYear: 2020, defaultValue: "2019/05/27 10:54:00", dateMode: 3, dateFormatArray: ['-', '-', ' ', ':', ':'] } ``` ### 1.0.1.0.2 `city类型` | 属性名| 是否必填| 值类型| 默认值| 说明| | --------- | -------- | -----: | --: | | defaultValue| | Array| `[0,0,0]`| 初始值 | 示例代码: ```javascript { defaultValue: [0,0,0] } ``` ### 1.0.1.0.3 `provincialStreet类型` | 属性名| 是否必填| 值类型| 默认值| 说明| | --------- | -------- | -----: | --: | | defaultValue| | Array| `[0,0,0,0]`| 初始值 | 示例代码: ```javascript { defaultValue: [0,0,0,0] } ``` ### 1.0.1.0.4 `custom类型` | 属性名| 是否必填| 值类型| 默认值| 说明| | --------- | -------- | -----: | --: | | itemArray| 是| Array| | 需循环展示的数据 | | defaultValue| | Array| | 初始值 | |linkage| | Boolean| `false`| 是否联动| |linkageNum| | Number| | 联动级数| |steps| | Object| | 自定义阶级变量名，详见下方示例与说明| ### 1.0.1.0.4.0.1 custom的steps属性说明 | 属性名| 是否必填| 值类型| 默认值| 说明| |------|----|----|----|-------| | step_1_value| | String| | 一级显示属性名| | step_2_value| |String| |二级显示属性名| |step_2_item| | String| | 二级联动数组属性名| |step_3_value| | String| | 三级显示属性名| |step_3_item| | String| | 三级联动数组属性名| 注：详见下方示例 示例代码: ```javascript { itemArray: [{ value_1: "江西", //value_1变量名需与下方steps.steps_1_value相同 /* 可添加多项自定义想要的数据 */ item_2: [{ //item_2变量名需与下方steps.steps_2_item相同 value_2: "南昌", //value_2变量名需与下方steps.steps_2_value相同 /* 可添加多项自定义想要的数据 */ item_3: [{ //item_3变量名需与下方steps.steps_3_item相同 name: "东湖", //name变量名需与下方steps.steps_3_value相同 /* 可添加多项自定义想要的数据 */ }] }, { value_2: "九江", item_3: [{ "name": "德安" }] }] }, { value_1: "山东", item_2: [{ value_2: "济南", item_3: [{ name: "历下" }], }, { value_2: "青岛", item_3: [{ name: "市南" }] }] }], steps: { step_1_value: "value_1", step_2_value: "value_2", step_2_item: "item_2", step_3_value: "name", step_3_item: "item_3" }, linkageNum: 3, //3 表示为3级联动 linkage: true //true 表示开启联动 } ``` ### 1.0.1.0.5 `custom2类型` | 属性名| 是否必填| 值类型| 默认值| 说明| | --------- | -------- | -----: | --: | | itemArray| | Array| | 需循环展示的数据(无联动使用此属性) | | itemObject| | Object| | 需循环展示的数据(联动使用此属性) | | defaultValue| | Array| | 初始值 | | linkage| | Boolean| `false`| 是否联动| | linkageNum| | Number| | 联动级数| | steps| | Object| | 自定义阶级变量名，详见下方示例与说明| ### 1.0.1.0.5.0.1 custom2的steps属性说明 | 属性名| 是否必填| 值类型| 默认值| 说明| |------|----|----|----|-------| | step_1_value| | String| | 一级显示属性名| | step_2_value| |String| |二级显示属性名| | step_3_value| | String| | 三级显示属性名| 注：详见下方示例 示例代码: ```javascript { itemObject: { step_1: [{ name: "江西" }, { name: "山东" }], step_2: [ ["南昌", "九江"], //对应step_1的江西 ["济南", "青岛"] //对应step_1的山东 ], step_3: [ [ [ //对应step_2的南昌 "东湖" ], [ //对应step_2的九江 "德安" ] ], [ [ //对应step_2的济南 "历下", ], [ //对应step_2的青岛 "市南", ] ] ] }, steps: { step_1_value: "name", //第一级显示的属性名 step_2_value: "", //第二级显示的属性名 step_3_value: "" //第三级显示的属性名 }, defaultValue: [1, 0, 0], //初始数据 linkageNum: 3, //3 表示为3级联动 linkage: true //true 表示开启联动 } ``` ## 1.0.2 buttonSet属性说明 | 值| 值类型| 默认值| 说明| | --------- | -------- | | cancelType| String| `default`| 取消按钮的类型 | | confirmType| String| `primary`| 确定按钮的类型 | | cancelStyle| cssStyle| | 取消按钮的样式, `只支持middle模式`| | confirmStyle| cssStyle| | 确定按钮的样式, `只支持middle模式`| | cancelName| String| `取消`| 取消按钮名称| | confirmName| String| `确定`| 确定按钮名称| |`v5.0更新`| | | | | cancleColor | Color| `#ADADAD`| 取消按钮的颜色，`不支持middle模式` | | confirmColor| Color| `#3399FF`| 确定按钮的颜色，`不支持middle模式` | ## 1.0.3 mode属性说明 | 值| 说明| | --------- | -------- | | middel| 从中间渐出 | | top| 从顶部弹出 | | bottom| 从底部弹出(默认) |