https://github.com/newfuture/miniprogram-image-picker
Customized image picker for Wechat MiniProgram (微信小程序自定义选图组件)
https://github.com/newfuture/miniprogram-image-picker
image-picker miniprogram miniprogram-component wechat wechat-miniprogram wx
Last synced: 3 days ago
JSON representation
Customized image picker for Wechat MiniProgram (微信小程序自定义选图组件)
- Host: GitHub
- URL: https://github.com/newfuture/miniprogram-image-picker
- Owner: NewFuture
- Created: 2018-08-14T06:57:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-07-12T18:00:06.000Z (almost 6 years ago)
- Last Synced: 2025-04-09T13:42:57.324Z (13 days ago)
- Topics: image-picker, miniprogram, miniprogram-component, wechat, wechat-miniprogram, wx
- Language: JavaScript
- Homepage:
- Size: 90.8 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# image-picker
Customized image picker for Wechat MiniProgram,小程序自定义图片选择组件
### Features
- [x] 任意数量
- [x] 移动调整顺序 (自动防抖)
- [x] 删除
- [x] 实时修改
- [x] generic 自定义图片内容和样式
## Install
via npm
```
npm i miniprogram-image-picker -S
```
```json
{
"usingComponents": {
"image-picker": "miniprogram-image-picker"
}
}
```
## Usage
[示例](https://github.com/NewFuture/miniprogram-image-picker/blob/master/test/index/index.wxml#L2)
### wxml
```html
```
当属性`value`,`column`,`max`更新时，视图会自动更新
example
```html
```
### events
- `input`
> 图片列表发生变化
```js
event.detail = { value, type };
event.detail.type; // string 获取事件内容类型 包括: "add" ,"delete","move"
e.detail.value = [{ path, size }]; // Array 图像对象列表
```
example event detail
```json
{
"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`
> 添加事件触发
```js
[{ size, path }];
```
- `delete`
> 删除事件触发
```js
{
index, // 图片索引
}
```
- `move`
> 移动事件触发
```js
{
form, //源 index
to, // 目标 index
}
```
#### bind input
```html
```
```js
Page({
data: {
pictures: [],
},
onInput(e) {
this.setData({ pictures: e.detail.value });
},
});
```
## generics
自定义 item 子组件
[示例](https://github.com/NewFuture/miniprogram-image-picker/tree/master/test/generic)
* [自定义子组件](https://github.com/NewFuture/miniprogram-image-picker/tree/master/test/component) 标号和长按删除
* [默认子组件](https://github.com/NewFuture/miniprogram-image-picker/tree/master/miniprogram_dist/item)
#### 使用自定义组件
> tips: 自定义组件名,也需要在json中`usingComponents`配置引用
```html
```
#### 子组件传递属性
```js
{
/**
* 图片信息
* @type {path:String,size:Number}
*/
img: String,
/**
* 此元素是否正则移动
*/
moving: Boolean,
/**
* 编号 从0开始
*/
index: Number,
}
```
##### 子组件支持的触发事件
```js
// 预览图片
this.triggerEvent("preview");
// 删除此元素
this.triggerEvent("delete");
```
参考
### demo
