{"id":20510543,"url":"https://github.com/eightfeet/picker","last_synced_at":"2025-04-13T22:33:37.876Z","repository":{"id":57110904,"uuid":"221151392","full_name":"eightfeet/Picker","owner":"eightfeet","description":"A highly customized Picker","archived":false,"fork":false,"pushed_at":"2021-08-06T14:24:43.000Z","size":274,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T12:47:12.666Z","etag":null,"topics":["address-picker","date-picker","mobile-selector","optionspicker","picker","pickerview","react-picker","react-select","vue-picker","vue-select"],"latest_commit_sha":null,"homepage":"http://www.eightfeet.cn/Picker/dist/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eightfeet.png","metadata":{"files":{"readme":"readme.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-12T06:59:26.000Z","updated_at":"2021-08-06T14:24:46.000Z","dependencies_parsed_at":"2022-08-20T20:20:55.566Z","dependency_job_id":null,"html_url":"https://github.com/eightfeet/Picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightfeet%2FPicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightfeet%2FPicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightfeet%2FPicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightfeet%2FPicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eightfeet","download_url":"https://codeload.github.com/eightfeet/Picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248790910,"owners_count":21162113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["address-picker","date-picker","mobile-selector","optionspicker","picker","pickerview","react-picker","react-select","vue-picker","vue-select"],"created_at":"2024-11-15T20:29:58.102Z","updated_at":"2025-04-13T22:33:37.831Z","avatar_url":"https://github.com/eightfeet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# picker\n\n```sh\nnpm install @eightfeet/picker\n```\n\u003e 也可以通过```\u003cscrip src=\"yourpath/picker.js\"\u003e\u003c/scrip\u003e```来安装Picker，window下会创建一个属性名为\\_\\_\\_Picker\\_\\_\\_的构造方法；\n\n### \u003ca href=\"http://www.eightfeet.cn/Picker/dist/index.html\"\u003eDemo\u003c/a\u003e\n\n### Usage\n\n```javascript\nimport Picker from @eightfeet/picker;\n\nconst datePicker = new Picker({\n        id: 'datePicker',\n        wheels: [\n            {data:['周日','周一','周二','周三','周四','周五','周六']},\n            {data:['08:00','09:00','10:00','11:00','12:00','13:00','14:00']}\n        ],\n        trigger: '#datepicker',\n        onConfirm: function (data) {\n            console.log(data);\n        }\n    });\n\ndatePicker.showPicker(['周二', '10：00']);\n```\n### 与框架结合使用\n- react组件\n[react Picker组件实践](https://github.com/eightfeet/Picker/blob/master/src/example/Picker.tsx)\n\n- react或vue中直接使用\n[在React中使用](http://www.eightfeet.cn/Picker/src/example/react.html)，[在Vue中使用](http://www.eightfeet.cn/Picker/src/example/vue.html)\n\n\n\n### parame\n\n| 参数          | 类型     | 说明                                                         | 是否必填 |\n| ------------- | -------- | ------------------------------------------------------------ | -------- |\n| id            | String   | 模块ID，模块根节点将以此为id，部分子节点将添加class=“id\\_功能名” 作为className用于覆写样式（能通过style参数设置样式的尽量不要通过className去覆写），默认id=MobileSelect_时间戳_100位随机数 | 否       |\n| parentId      | String   | 模块挂载的父节点，                                           | 否       |\n| emBase        | Number   | 基础字体大小，模块采用em为单位制，子节点元素单位em的参考值，比如｛emBase:20｝则相当于1em=20px | 否       |\n| trigger       | String   | 引用picker页面的目标触发node，用于点击以唤起picker           | 必填     |\n| title         | String   | 设置picker的标题                                             | 否       |\n| wheels        | Object   | picker的原始数据，这里控制picker选择器的类型,\u003ca href=\"#wheelstag\"\u003e见wheels数据结构\u003c/a\u003e | 必填     |\n| keyMap        | Object   | 当wheels为 “联动数据结构” 或者 “{ key: value }数据结构” 时用来定义picker显示的数据结构（具体参照wheels数据结构） | 否       |\n| defaultValue  | Array    | 创建picker初始化时默认选择的值，请使用keyMap中valve对应定义的key的值 | 否       |\n| style         | Object   | 控制picker的样式，\u003ca href=\"#styletag\"\u003e见style附表\u003c/a\u003e        |          |\n| onConfirm     | Function | 点击确认时的回调，以参数形式返回被选中的结果                 | 否       |\n| onCancel      | Function | 点击取消或者遮罩层时的回调，以参数形式返回上次选中的结果     | 否       |\n| transitionEnd | Function | 滚动结束时的回调，以参数形式返回被选中的结果                 | 否       |\n| onShow        | Function | 显示picker时的回调，返回picker对象                           | 否       |\n| onHide        | Function | 隐藏picker时的回调，返回picker对象                           | 否       |\n| onChange      | Function | 改变选择时的回调，以参数形式返回被选中的结果                 | 否       |\n\n\n\n### options\n\n#### new Picker().updatePicker(value)\n\n用于更新picker默认值，value是要更新的值，value是一个数组，每一项代表每列轮子的默认值。如果定义了keyMap请使用keyMap中valve对应定义的值；\n\n​\t\tex：假设picker的数据与keyMap定义如下\t\n\n```javascript\nwheelsdata = [\n    {\n        data: [\n            { val: 0, date: '周日' },\n            { val: 1, date: '周一' },\n            { val: 2, date: '周二' },\n            { val: 3, date: '周三' },\n            { val: 4, date: '周四' },\n            { val: 5, date: '周五' },\n            { val: 6, date: '周六' }\n        ]\n    },\n    {\n        data: [\n            { val: 8, date: '08:00' },\n            { val: 9, date: '09:00' },\n            { val: 10, date: '10:00' },\n            { val: 11, date: '11:00' },\n            { val: 12, date: '12:00' },\n            { val: 13, date: '13:00' },\n            { val: 14, date: '14:00' }\n        ]\n    }\n]\n\nkeyMap = {display: 'date', value: 'val'}\n```\n\n​\t\tvalue值应当是每列的data[keyMap.value]组成的数组。\n\n**比如我们要updatePicker默认值到周日的9：00，那么value值应该是    **```value = [0,9]```\n\n\n\n#### new Picker().showPicker(value);\n\n显示picker，有参数时定位到参数值位置再显示picker, 参数value值同updatePicker的参数值\n\n\n\n#### new Picker().getCurValue();\n\n获取当前选中结果的值\n\n\n\n#### new Picker().distory();\n\n销毁picker，注意这里仅对主要事件侦听器以及创建picker时生成的html节点的移除，外部对象请自行销毁，比如\n\n```javascript\nvar newPicker = new Picker({...});\nnewPicker.distory();\nnewPicker = null; // 完全销毁生成的picker对象\n```\n\n\n\n### \u003cspan id=\"wheelstag\"\u003ewheels数据结构\u003c/span\u003e\n\n- **基础数据结构**\n\n  \u003e root数组中每一个Object为一个滚动wheel列，data数组的每一项为当前wheel列的每一项\n\n  ```javascript\n  [\n      {data:['周日','周一','周二','周三','周四','周五','周六']},     \n      {data:['08:00','09:00','10:00','11:00','12:00','13:00','14:00']}\n  ]\n  ```\n\n  \n\n- **{ key: value } 数据结构**\n\n  \u003e 这类数据常用于显示信息与对应值分开展示的场景，root数组中每一个Object为一个滚动wheel列，data数组的每一项为当前wheel列的每一项；\n  \u003e\n  \u003e 这里需要注意的是默认情况下Picker以name作为展示key，以value作为取值key，如果您的当前数据对象没有这两个key或者需要指定数据时需要通过keyMap来通知Picker当前数据哪个key是用于显示的, 比如下面数据就需要指定```keyMap = { display: 'date', value: 'val'}```\n\n  ```javascript\n  [\n      {\n          data: [\n              { val: 0, date: '周日' },\n              { val: 1, date: '周一' },\n              { val: 2, date: '周二' },\n              { val: 3, date: '周三' },\n              { val: 4, date: '周四' },\n              { val: 5, date: '周五' },\n              { val: 6, date: '周六' }\n          ]\n      },\n      {\n          data: [\n              { val: 8, date: '08:00' },\n              { val: 9, date: '09:00' },\n              { val: 10, date: '10:00' },\n              { val: 11, date: '11:00' },\n              { val: 12, date: '12:00' },\n              { val: 13, date: '13:00' },\n              { val: 14, date: '14:00' }\n          ]\n      }\n  ]\n  ```\n\n  \n\n- **\u003cspan id=\"wheelsdata\"\u003e联动数据结构\u003c/span\u003e**  \n\n  \u003e 联动数据常用于父子关系数据的展示，他的显示信息与对应值也是分开展示的场景，数据中的每一个层级关系代表列一个wheel列，平级数组的每一个对象为当前wheel列的每一项，依次到最后一个子集。wheels子集嵌套越深，Picker的列数也就越多\n  \u003e\n  \u003e 这里需要注意的是同 “{ key: value } 数据” 结构一样需要通过keyMap来通知Picker当前数据哪个key是用于显示的, 比如下面数据就需要指定```keyMap = { display: 'date', value: 'val', childs: 'childs'}```\n\n  ```javascript\n  [\n      {\n          data: [\n              {\n                  val: 'a',\n                  date: 'A',\n                  childs: [\n                      {\n                          val: 'a-a',\n                          date: 'A-A',\n                          childs: [\n                              {\n                                  val: 'a-a-a',\n                                  date: 'A-A-A',\n                              },\n                              {\n                                  ...第三级第二项\n                              }\n                          ]\n                      },\n                      {\n                          ...第二级第二项\n                      }\n                  ]\n              },\n              {\n  \t\t\t\t...第一级第二项\n              }\n          ]\n      }\n  ],\n  ```\n\n  \n\n  \n\n### \u003cspan id=\"styletag\"\u003estyle附表\u003c/span\u003e\n\n\u003e 用于定义Picker的样式，这里以行内样式覆写Picker的默认样式，每个属性名对应一个node节点；属性名的值应该是一个style Object，Object的key建议使用javascript 的style属性，比如 { backgroundColor: \"red\" , zIndex: 100 }，这样Picker内部的生成程序可以更好的补全浏览器厂商前缀，当然如果样式属性浏览器支持很好的话，你也完全可以写成 { \"background-color\": \"red\" , \"z-index\": 100 }\n\n| 属性名     | 说明                                                     |\n| ---------- | -------------------------------------------------------- |\n| overlay    | 覆盖层   overlay: { backgroundColor: 'rgba(0,0,0,0.4)' } |\n| wrap       | 外框                                                     |\n| headlines  | 标题栏                                                   |\n| title      | 标题                                                     |\n| cancel     | 取消                                                     |\n| confirm    | 确定                                                     |\n| panel      | 轮子面板                                                 |\n| selectline | 选择线                                                   |\n| mask       | 轮子面板覆盖层                                           |\n\n**注意：这里暂不提供轮子、轮子的每一项以及轮子被选中项/激活时的样式编辑，当然如果非常有必要编辑他们的样式也可以通过自定义class来覆写，建议尽量不要覆写轮子每一项的样式，特别是高度，Picker内部html元素的高度是依照轮子每一项的高度计算而来**\n\n\u003e 轮子的样式 class=\\`${Picker.id}_wheel\\`\n\u003e\n\u003e 轮子被选中项的样式 class=\\`${Picker.id}_activated\\`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feightfeet%2Fpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feightfeet%2Fpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feightfeet%2Fpicker/lists"}