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,小程序自定义图片选择组件

Features

任意数量
移动调整顺序
删除
实时修改
generic 自定义图片内容和样式

Install

via npm

npm i miniprogram-image-picker -S

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

Usage

示例

wxml

<image-picker
    bind:input="输入更新响应回调事件"
    bind:move="移动图片回调事件"
    bind:add="添加图片应回调事件"
    bind:delete="删除图片回调事件"
    value="图像列表[{path,size}],默认空"
    column="列数默认1~5: 3"
    max="最多图片数量可以超过9默认: 9"
    tap-preview="点击图片预览,如果false会触发tapItem,默认: true"
    data-open="是否立即打开选择器,默认: {{false}}"
    data-source="选图来源, 默认: {{['album', 'camera']}}"
    data-type="图片压缩类型,默认: {{['compressed', 'original']}}"
/>

当属性value,column,max更新时，视图会自动更新

example

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

events

input

图片列表发生变化

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"
}

add

添加事件触发

[{ size, path }];

delete

删除事件触发

{
   index, // 图片索引
}

move

移动事件触发

{
  form, //源 index
  to, // 目标 index
}

bind input

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

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

generics

自定义 item 子组件

示例

自定义子组件标号和长按删除
默认子组件

使用自定义组件

tips: 自定义组件名,也需要在json中usingComponents配置引用

<image-picker generics:item="自定义组件名"></image-picker>

子组件传递属性

{
    /**
     * 图片信息
     * @type {path:String,size:Number}
     */
    img: String,
    /**
     * 此元素是否正则移动
     */
    moving: Boolean,
    /**
     * 编号 从0开始
     */
    index: Number,
}

子组件支持的触发事件

// 预览图片
this.triggerEvent("preview");
// 删除此元素
this.triggerEvent("delete");

参考

miniprogram-image-picker