{"id":13601715,"url":"https://github.com/MPComponent/mpvue-picker","last_synced_at":"2025-04-11T04:31:25.511Z","repository":{"id":32891393,"uuid":"132630793","full_name":"MPComponent/mpvue-picker","owner":"MPComponent","description":"基于 mpvue 框架的小程序选择控件，支持单列，多列，联动。","archived":false,"fork":false,"pushed_at":"2022-12-10T22:20:02.000Z","size":2112,"stargazers_count":172,"open_issues_count":20,"forks_count":77,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-15T01:01:40.759Z","etag":null,"topics":["javascript","mpvue","picker","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MPComponent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-08T15:43:34.000Z","updated_at":"2023-10-10T02:41:21.000Z","dependencies_parsed_at":"2023-01-14T22:45:23.277Z","dependency_job_id":null,"html_url":"https://github.com/MPComponent/mpvue-picker","commit_stats":null,"previous_names":["kuangpf/mpvue-picker"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MPComponent%2Fmpvue-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MPComponent%2Fmpvue-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MPComponent%2Fmpvue-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MPComponent%2Fmpvue-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MPComponent","download_url":"https://codeload.github.com/MPComponent/mpvue-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223449883,"owners_count":17146984,"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":["javascript","mpvue","picker","vue"],"created_at":"2024-08-01T18:01:06.986Z","updated_at":"2024-11-07T04:31:30.194Z","avatar_url":"https://github.com/MPComponent.png","language":"Vue","readme":"# mpvue-picker\n\n\u003e 基于 mpvue 框架的小程序选择控件\n\n\u003e 支持单列、多列以及级联\n\n\u003e 目前版本为 2.0，1.0 使用请[点击](./README_1.x.x.md)\n\n\u003e citypicker 已支持，详情点击 [mpvue-citypicker](https://github.com/MPComponent/mpvue-citypicker)\n\n\n![npm version](https://img.shields.io/npm/v/mpvue-picker.svg?style=flat)\n![download](https://img.shields.io/npm/dm/mpvue-picker.svg?style=flat)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n![license](https://img.shields.io/github/license/KuangPF/mpvue-picker.svg)\n\n## 前言\n在 [mpvue](https://github.com/Meituan-Dianping/mpvue)开源之初写了 [用 vue 写小程序，基于 mpvue 框架重写 weui](https://github.com/KuangPF/mpvue-weui)。当时用的是小程序的原生组件，没有对其进行封装和组件化。而对于现在的前端开发环境，`组件化`，`模块化`，`工程化`以及`自动化`已经是一种标配。而`mpvue`框架又提供了一个很好的组件化开发平台，因此就对小程序中的 `picker` 组件进行封装，使其在用`mpvue`开发的时候能够用快速的实现 `picker`的功能。\n\n:warning:[`uni-app` 插件市场的 `mpvue-picker`](https://ext.dcloud.net.cn/search?q=mpvue-picker) 不是本人在维护，如果要在 `uni-app` 中使用的话推荐通过 `npm` 包的方式引入。\n\n## 为什么封装 `picker` 组件\n\n* 其实小程序提供了原生的 `picker` 组件，但是在开发的时候会发现在 android 手机上看到的 `picker`效果与`微信开发者工具`预览的效果不一样，其实就是丑了一点点...\n\n* 在小程序中使用 `picker` 的地方很多，很常见。\n\n## 使用\n\n* 安装\n``` bash\nnpm install mpvue-picker --save\n```\n\n* 在页面中使用\n``` javascript\n\u003ctemplate\u003e\n  \u003cdiv class=\"mpvue-picer\"\u003e\n    \u003cbutton @click=\"showPicker\"\u003etest for mpvuePicker\u003c/button\u003e\n    \u003cmpvue-picker ref=\"mpvuePicker\" :mode=\"mode\" :pickerValueDefault=\"pickerValueDefault\" @onChange=\"onChange\" @onConfirm=\"onConfirm\" @onCancel=\"onCancel\" :pickerValueArray=\"pickerValueArray\"\u003e\u003c/mpvue-picker\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport mpvuePicker from 'mpvue-picker';\nexport default {\n  components: {\n    mpvuePicker\n  },\n  data() {\n    return {\n      mode: 'selector',\n      pickerValueArray: [\n        {\n          label: '住宿费',\n          value: 1\n        },\n        {\n          label: '活动费',\n          value: 2\n        },\n        {\n          label: '通讯费',\n          value: 3\n        },\n        {\n          label: '补助',\n          value: 4\n        }\n      ],\n      pickerValueDefault: [1]\n    };\n  },\n  methods: {\n    showPicker() {\n      this.$refs.mpvuePicker.show();\n    },\n    onConfirm(e) {\n      console.log(e);\n    },\n    onChange(e) {\n      console.log(e);\n    },\n    onCancel(e) {\n      console.log(e);\n    }\n  }\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n\n\u003c/style\u003e\n\n```\n* [更多 demo](https://github.com/KuangPF/mpvue-picker/blob/master/src/pages/demo/index.vue)\n* 初始化\n\n在父组件中调用 ` mpvuePicker` 实例中的 `show` 方法即可\n\n``` javascript\nthis.$refs.mpvuePicker.show();\n```\n\n## 效果\n\n![mpvue-picker-demo01](https://github.com/KuangPF/mpvue-picker/blob/master/src/pages/img/picker01.gif)\n![mpvue-picker-demo02](https://github.com/KuangPF/mpvue-picker/blob/master/src/pages/img/picker02.gif)\n![mpvue-picker-demo03](https://github.com/KuangPF/mpvue-picker/blob/master/src/pages/img/picker03.gif)\n![mpvue-picker-demo04](https://github.com/KuangPF/mpvue-picker/blob/master/src/pages/img/picker04.gif)\n\n## 参数说明\n\n### mode\n* 说明：picker 组件类型 \n* 类型：String\n* 可选值：\n    * selector（单列） \n    * timeSelector（时间选择）\n    * dateSelector (日期选择)\n    * multiSelector（多列） \n    * multiLinkageSelector（级联）\n* 是否必填： 否\n* 默认值：selector\n\n### pickerValueArray\n* 说明：picker 渲染数据\n* 类型：Array\n* 可选值：-\n* 是否必填： 是（当 mode 值为 timeSelector 不用填）\n* 默认值：-\n\n### pickerValueDefault\n* 说明：picker 默认选中值 \n* 类型：Array || Date （类型为 Date 仅限 mode 为 dateSelector 的情形）\n* 可选值：-\n* 是否必填： 否 (当同一个组件使用多种 mode 来回切换使用时 pickerValueDefault 必填)\n* 默认值：[]\n* 相关说明：如果 mode 为 dateSelector，默认值为当前日期，初始值支持 Date 对象或者数组，以 2019-4-5 为例，`new Date('2019-04-05')` 和 `[2019, 4, 5]` 均可以\n \n### deepLength\n* 说明：几级联动\n* 类型：Number\n* 可选值：\n  * 2\n  * 3 \n* 是否必填： 否\n* 默认值：2\n\n### themeColor\n* 说明：主题颜色\n* 类型：Color\n* 是否必填： 否\n* 默认值：#1aad19\n\n### onChange\n* 说明：picker 组件滚动时回调，返回选中的 label, value 和数组索引 index 的值\n* 类型：EventHandle\n* 可选值：-\n* 是否必填： 否\n* 默认值：-\n\n### onConfirm\n* 说明：picker 组件点击确定时回调，返回选中的 label, value 和数组索引 index 的值\n* 类型：EventHandle\n* 可选值：-\n* 是否必填： 否\n* 默认值：-\n\n### onCancel\n* 说明：picker 组件点击取消时回调，返回选中的 label, value 和数组索引 index 的值\n* 类型：EventHandle\n* 可选值：-\n* 是否必填： 否\n* 默认值：-\n\n## 相关数据结构说明\n\n#### **单列**\n\u003cdetails\u003e\n\u003csummary\u003e点击展开单列数据结构\u003c/summary\u003e\n\n``` javascript\npickerValueArray: [\n  {\n    label: '住宿费',\n    value: 1\n  },\n  {\n    label: '活动费',\n    value: 2\n  },\n  {\n    label: '通讯费',\n    value: 3\n  },\n  {\n    label: '补助',\n    value: 4\n  }\n],\n```\n\u003c/details\u003e\n\n\n#### **多列**\n\u003cdetails\u003e\n\u003csummary\u003e点击展开多列数据结构\u003c/summary\u003e\n\n``` javascript\npickerMulArray: [\n  [\n    { label: '中国', value: 1 },\n    { label: '美国', value: 2 },\n    { label: '日本', value: 3 },\n    { label: '俄罗斯', value: 4 }\n  ],\n  [\n    { label: '茶', value: 1 },\n    { label: '咖啡', value: 2 },\n    { label: '寿司', value: 3 },\n    { label: '奶酪', value: 4 }\n  ],\n  [\n    { label: '歼20', value: 1 },\n    { label: 'F22', value: 2 },\n    { label: '秋月级', value: 3 },\n    { label: 'T50', value: 4 }\n  ]\n]\n```\n\u003c/details\u003e\n\n#### **二级联动**\n\u003cdetails\u003e\n\u003csummary\u003e点击展开二级联动数据结构\u003c/summary\u003e\n\n``` javascript\npickerValueArray:\n[\n  {\n    label: '飞机票',\n    value: 0,\n    children: [{\n      label: '经济舱',\n      value: 1\n    },\n    {\n      label: '商务舱',\n      value: 2\n    }\n    ]\n  },\n  {\n    label: '火车票',\n    value: 1,\n    children: [{\n      label: '卧铺',\n      value: 1\n    },\n    {\n      label: '坐票',\n      value: 2\n    },\n    {\n      label: '站票',\n      value: 3\n    }\n    ]\n  },\n  {\n    label: '汽车票',\n    value: 3,\n    children: [{\n      label: '快班',\n      value: 1\n    },\n    {\n      label: '普通',\n      value: 2\n    }\n    ]\n  }\n]\n```\n\u003c/details\u003e\n\n\n#### **三级联动**\n\u003cdetails\u003e\n\u003csummary\u003e点击展开三级联动数据结构\u003c/summary\u003e\n\n``` javascript\npickerValueArray:\n[\n  {\n    label: 'phone',\n    value: 0,\n    children: [\n      {\n        label: 'iphone',\n        value: 1,\n        children: [{\n          label: 'iphoneX',\n          value: 1\n        },\n        {\n          label: 'iphone8',\n          value: 2\n        }, {\n          label: 'iphone8 Plus',\n          value: 3\n        }]\n      },\n      {\n        label: 'android',\n        value: 1,\n        children: [\n          {\n            label: 'vivo',\n            value: 1\n          },\n          {\n            label: '魅族',\n            value: 2\n          }, {\n            label: '小米',\n            value: 3\n          }\n        ]\n      }\n    ]\n  },\n  {\n    label: 'PC',\n    value: 0,\n    children: [\n      {\n        label: 'mac',\n        value: 1,\n        children: [\n          {\n            label: 'macbook Pro',\n            value: 1\n          },\n          {\n            label: 'iMac',\n            value: 2\n          }, {\n            label: 'mackbook',\n            value: 3\n          }, {\n            label: 'mackbook air',\n            value: 3\n          }\n        ]\n      },\n      {\n        label: 'windows',\n        value: 1,\n        children: [\n          {\n            label: 'dell',\n            value: 1\n          },\n          {\n            label: 'surface',\n            value: 2\n          }, {\n            label: 'thinkpad',\n            value: 3\n          }\n        ]\n      }\n    ]\n  }\n]\n```\n\u003c/details\u003e\n\n\n## 相关说明\n\n对于多级联动，由于没有动态添加 picker 列数以及动态渲染其值，因此目前只支持 二级联动和三级联动。\n\n\n## 版本日志\n\n[version logs](https://github.com/KuangPF/mpvue-picker/releases)\n","funding_links":[],"categories":["组件"],"sub_categories":["目录"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMPComponent%2Fmpvue-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMPComponent%2Fmpvue-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMPComponent%2Fmpvue-picker/lists"}