Package Exports

miniprogram-image-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (miniprogram-image-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

image-picker

Customized image picker for Wechat MiniProgram,小程序自定义图片选择组件

Install

npm pakage

npm i miniprogram-image-picker -S

{
  "usingComponents": {
    "image-picker": "miniprogram-image-picker"
  }
}

git submodule/subtree

git subtree add --prefix=components/image-picker --squash git@github.com:NewFuture/image-picker.git master

{
  "usingComponents": {
    "image-picker": "/components/image-picker/index"
  }
}

Usage

wxml

<image-picker
    bind:input="输入响应回调事件"
    value="图像列表[{path,size}],默认空"
    column="列数默认1~5: 3"
    max="最多图片数量可以超过9默认: 9"
    data-open="是否立即打开选择器,默认: {{false}}"
    data-source="选图来源, 默认: {{['album', 'camera']}}"
    data-type="图片压缩类型,默认: {{['compressed', 'original']}}"
/>

example

<image-picker
    bind:input="onImgsUpdate"
    value="{{[{path:'xxxx',size:''}]}}"
    column="4"
    max="16"
    data-open="{{true}}"
    data-source="{{['album']}}"
    data-type="{{['compressed']}}"
/>

input event

event.detail = { value, type };
event.detail.type // string 获取事件内容类型 包括: "add" ,"delete","move"
e.detail.value = [{path,size}] // Array 图像对象列表

example event detail

{
  "value":[
    {"path":"http://tmp/wx7282106b813ba035.o6zAJsw2p7YWMPpe1hhoXcqP7BoE.9SHfItdYeoVz7205b342cc5ec2480d7fea923836a227.jpg","size":18153},
    {"path":"http://tmp/wx7282106b813ba035.o6zAJsw2p7YWMPpe1hhoXcqP7BoE.ZaqbvhV5XSs0beb97b7db6208cbd8c1f3001dd83ef5c.jpg","size":15233},
    {"path":"http://tmp/wx7282106b813ba035.o6zAJsw2p7YWMPpe1hhoXcqP7BoE.wNsZ7ruZD0sT0668a02aeb46768d750fff59bf6737b8.jpg","size":11792},
    {"path":"http://tmp/wx7282106b813ba035.o6zAJsw2p7YWMPpe1hhoXcqP7BoE.vGY6456CvSGvcf8149c4beb7f4deeb3680ae2f219b51.jpg","size":19320},
    {"path":"http://tmp/wx7282106b813ba035.o6zAJsw2p7YWMPpe1hhoXcqP7BoE.BImgk5zyXJDv630a1e89c698fee6cef3948394866249.jpg","size":19560}
  ],
  "type":"move"
}

bind input

<image-picker bind:input="onInput"/>

Page({
    data: {
        pictures: []
    },
    onInput(e) {
        this.setData({ pictures: e.detail.value })
    }
});

wxss样式覆盖

可以覆盖组件默认样式文件的class

.ImagePicker {/*整个组件样式*/}
.ImagePicker-item {/*每个方框样式*/}
.ImagePicker-itemImg {/*每个方框内图片样式*/}
.ImagePicker-addIcon {/*添加按钮样式*/}