ImagePicker 图片选择器 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

注意：只是图片选择器，一般用于上传图片前的文件选择操作，但不包括图片上传的功能。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {ImagePicker} from '@21cnfe/vui'  
Vue.component('ImagePicker', ImagePicker)

代码演示

ImagePicker 图片选择器 imagePickers

基本用法

<ImagePicker
  :files="files"
  :length="5"
  :selectable="files.length < 5"
  multiple
  @onChange="handleChange"
  @onImageClick="handleImageClick"
  :fileSize="10485760"
  @removeImage="handleRemove"
  @onImageClose="handleImageClose"
/>

API

属性	说明	类型	默认值
`files`	图片文件数组,元素为对象,包含属性 url（必选），可能还有id, orientation, 以及业务需要的其它属性	Array	`[]`
`selectable`	是否显示添加按钮	Boolean	`true`
`length`	单行的图片数量	String \| Number	4
`fileSize`	上传图片的大小限制(单位：bit)	Number	`--`

Event

事件名称	说明	回调参数
`onChange`	files 值发生变化触发的回调函数, operationType 操作类型有添加(`add`)，移除(`remove`)，如果是移除操作，则第三个参数代表的是移除图片的索引	(files: Object, operationType: string, index: number): void
`onImageClick`	点击图片触发的回调	(index: number, files: Object): void
`removeImage`	点击删除图片触发的回调	(index: number): void
`onImageClose`	点击关闭图片触发的回调	(index: number): void

1. ImagePicker 图片选择器 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

ImagePicker 图片选择器 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

引入方式

代码演示

API

Event

ImagePicker 图片选择器 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用