{"id":15424872,"url":"https://github.com/newfuture/miniprogram-image-picker","last_synced_at":"2025-04-19T16:14:10.258Z","repository":{"id":57297997,"uuid":"144681271","full_name":"NewFuture/miniprogram-image-picker","owner":"NewFuture","description":"Customized image picker for Wechat MiniProgram (微信小程序自定义选图组件)","archived":false,"fork":false,"pushed_at":"2019-07-12T18:00:06.000Z","size":93,"stargazers_count":10,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T13:42:57.324Z","etag":null,"topics":["image-picker","miniprogram","miniprogram-component","wechat","wechat-miniprogram","wx"],"latest_commit_sha":null,"homepage":"","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/NewFuture.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":"2018-08-14T06:57:32.000Z","updated_at":"2025-02-06T06:02:48.000Z","dependencies_parsed_at":"2022-09-06T03:30:20.142Z","dependency_job_id":null,"html_url":"https://github.com/NewFuture/miniprogram-image-picker","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewFuture%2Fminiprogram-image-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewFuture%2Fminiprogram-image-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewFuture%2Fminiprogram-image-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewFuture%2Fminiprogram-image-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NewFuture","download_url":"https://codeload.github.com/NewFuture/miniprogram-image-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249735049,"owners_count":21317958,"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":["image-picker","miniprogram","miniprogram-component","wechat","wechat-miniprogram","wx"],"created_at":"2024-10-01T17:49:08.607Z","updated_at":"2025-04-19T16:14:10.209Z","avatar_url":"https://github.com/NewFuture.png","language":"JavaScript","readme":"# image-picker\n\nCustomized image picker for Wechat MiniProgram,小程序自定义图片选择组件\n\n### Features\n\n-   [x] 任意数量\n-   [x] 移动调整顺序 (自动防抖)\n-   [x] 删除\n-   [x] 实时修改\n-   [x] generic 自定义图片内容和样式\n\n## Install\n\nvia npm\n\n```\nnpm i miniprogram-image-picker -S\n```\n\n```json\n{\n    \"usingComponents\": {\n        \"image-picker\": \"miniprogram-image-picker\"\n    }\n}\n```\n\n## Usage\n\n[示例](https://github.com/NewFuture/miniprogram-image-picker/blob/master/test/index/index.wxml#L2)\n\n### wxml\n\n```html\n\u003cimage-picker\n    bind:input=\"输入更新响应回调事件\"\n    bind:move=\"移动图片回调事件\"\n    bind:add=\"添加图片应回调事件\"\n    bind:delete=\"删除图片回调事件\"\n    value=\"图像列表[{path,size}],默认空\"\n    column=\"列数默认1~5: 3\"\n    max=\"最多图片数量可以超过9默认: 9\"\n    tap-preview=\"点击图片预览,如果false会触发tapItem,默认: true\"\n    data-open=\"是否立即打开选择器,默认: {{false}}\"\n    data-source=\"选图来源, 默认: {{['album', 'camera']}}\"\n    data-type=\"图片压缩类型,默认: {{['compressed', 'original']}}\"\n/\u003e\n```\n\n当属性`value`,`column`,`max`更新时，视图会自动更新\n\nexample\n\n```html\n\u003cimage-picker\n    bind:input=\"onImgsUpdate\"\n    value=\"{{[{path:'xxxx',size:''}]}}\"\n    column=\"4\"\n    max=\"16\"\n    data-source=\"{{['album']}}\"\n    data-type=\"{{['compressed']}}\"\n/\u003e\n```\n\n### events\n\n-   `input`\n    \u003e 图片列表发生变化\n\n```js\nevent.detail = { value, type };\nevent.detail.type; // string 获取事件内容类型 包括: \"add\" ,\"delete\",\"move\"\ne.detail.value = [{ path, size }]; // Array 图像对象列表\n```\n\nexample event detail\n\n```json\n{\n    \"value\": [\n        {\n            \"path\": \"http://tmp/wx7282106b813ba035.o6zAJsw2p7YWMPpe1hhoXcqP7BoE.9SHfItdYeoVz7205b342cc5ec2480d7fea923836a227.jpg\",\n            \"size\": 18153\n        },\n        {\n            \"path\": \"http://tmp/wx7282106b813ba035.o6zAJsw2p7YWMPpe1hhoXcqP7BoE.ZaqbvhV5XSs0beb97b7db6208cbd8c1f3001dd83ef5c.jpg\",\n            \"size\": 15233\n        },\n        {\n            \"path\": \"http://tmp/wx7282106b813ba035.o6zAJsw2p7YWMPpe1hhoXcqP7BoE.wNsZ7ruZD0sT0668a02aeb46768d750fff59bf6737b8.jpg\",\n            \"size\": 11792\n        },\n        {\n            \"path\": \"http://tmp/wx7282106b813ba035.o6zAJsw2p7YWMPpe1hhoXcqP7BoE.vGY6456CvSGvcf8149c4beb7f4deeb3680ae2f219b51.jpg\",\n            \"size\": 19320\n        },\n        {\n            \"path\": \"http://tmp/wx7282106b813ba035.o6zAJsw2p7YWMPpe1hhoXcqP7BoE.BImgk5zyXJDv630a1e89c698fee6cef3948394866249.jpg\",\n            \"size\": 19560\n        }\n    ],\n    \"type\": \"move\"\n}\n```\n\n-   `add`\n    \u003e 添加事件触发\n\n```js\n[{ size, path }];\n```\n\n-   `delete`\n    \u003e 删除事件触发\n\n```js\n{\n   index, // 图片索引\n}\n```\n\n-   `move`\n    \u003e 移动事件触发\n\n```js\n{\n  form, //源 index\n  to, // 目标 index\n}\n```\n\n#### bind input\n\n```html\n\u003cimage-picker bind:input=\"onInput\" /\u003e\n```\n\n```js\nPage({\n    data: {\n        pictures: [],\n    },\n    onInput(e) {\n        this.setData({ pictures: e.detail.value });\n    },\n});\n```\n\n## generics\n\n自定义 item 子组件\n\n[示例](https://github.com/NewFuture/miniprogram-image-picker/tree/master/test/generic)\n* [自定义子组件](https://github.com/NewFuture/miniprogram-image-picker/tree/master/test/component) 标号和长按删除\n* [默认子组件](https://github.com/NewFuture/miniprogram-image-picker/tree/master/miniprogram_dist/item)\n\n\n#### 使用自定义组件\n\n\u003e tips: 自定义组件名,也需要在json中`usingComponents`配置引用\n\n```html\n\u003cimage-picker generics:item=\"自定义组件名\"\u003e\u003c/image-picker\u003e\n```\n\n#### 子组件传递属性\n\n```js\n{\n    /**\n     * 图片信息\n     * @type {path:String,size:Number}\n     */\n    img: String,\n    /**\n     * 此元素是否正则移动\n     */\n    moving: Boolean,\n    /**\n     * 编号 从0开始\n     */\n    index: Number,\n}\n```\n\n##### 子组件支持的触发事件\n\n```js\n// 预览图片\nthis.triggerEvent(\"preview\");\n// 删除此元素\nthis.triggerEvent(\"delete\");\n```\n\n参考 \n\n### demo\n\n![demo](https://user-images.githubusercontent.com/6290356/58382382-08f0dd80-7ffc-11e9-8e96-1a05a3dab49a.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewfuture%2Fminiprogram-image-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnewfuture%2Fminiprogram-image-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewfuture%2Fminiprogram-image-picker/lists"}