图片选择器 ImagePicker

用于选择需要上传的图片,可自定义需要上传的图片数量。

设置最大值

图片选择器内部可以通过count设置最多可以选择的图片张数,默认是9张,没有最大张数的限制,但因根据实际情况合理选择,linchange事件能监听到选中图片数量的变化。

示例代码

<l-image-picker count="9" bind:linchange="onChangeTap" />

自定义每行图片的数量

图片选择器内部可以通过size设置每行图片的数量,默认是3张,可选值为[3, 4]

示例代码

<l-image-picker size="4" bind:linchange="onChangeTap" />

设置选择图片的质量

通过size-type可以设置图片来源,可选值是original/compressed,默认是original

注意事项

  • original表示原图。
  • compressed表示缩略图。

示例代码

<l-image-picker count="9" size-type="compressed" />

自定义图片添加按钮

通过 <slot> 的方式可以自定义ImagePicker组件的添加图片部分,在此之前需要将custom设置为true

示例代码

<l-image-picker custom="{{true}}" >
  <view>
    <image src="path/to/img.png" />
  </view>
</l-image-picker>

自定义图片的样式

当我们需要改变图片的样式时,可以通过l-item-class这样的外部样式类来完成。

示例代码

<l-image-picker l-item-class="item" />

清除图片

当我们需要清除所有的图片时,可以通过clear属性为true

注意事项

  • 每次在清除图片成功后,组件内会将clear属性还原为false, 如果你需要再次将图片清空,再次将clear设置为true即可。
  • 除此之外,你还可以设置urls属性为 [],来使图片清空

示例代码

<l-image-picker clear="{{ isClear }}" />
<l-button bind:lintap="onClearTap">清除图片</l-button>
Page({
  onClearTap() {
    this.setData({
      isClear: true
    })
  }
})

图片选择器属性(ImagePicker Attributes)

参数 说明 类型 可选值 默认值
urls 图片数组,支持两种格式,详见下方Tips Array []
count 最多可以选择的图片张数 String/Number 9
size 每行可显示的个数 String/Number 3/4 3
mode 图片剪裁、缩放的模式 String 参考官方image组件的mode属性可选值 aspectFit
size-type 所选的图片的尺寸 String original/compressed original
custom 设置是否传入slot Boolean true/false false
is-preview 是否可以预览 Boolean true/false true
clear 是否清空列表 Boolean true/false true

TIP

urls接收值可以有两种形式。

  1. url数组,格式为
['图片1.jpg','图片2.jpg','图片3.jpg']

数组内元素为图片地址。

  1. url对象数组,对象中包含url和key。格式为:
[{url:'1.jpg',
  key: 'key1'},
  {url:'2.jpg',
  key:'key2}]

两种模式根据实际情况自行选择。在组件事件中返回的detail内容会根据所传的urls形式返回。

已经弃用的属性

以下这些属性已经停止支持,将在未来的某个版本中去除,请使用上方的属性替代

参数 说明 备注
temp-file-paths(已弃用) 图片显示的列表 请按照最新格式传入urls属性

图片选择器外部样式类(ImagePicker ExternalClasses)

外部样式类名 说明 备注
l-class 设置ImagePicker的外部样式类 ---
l-item-class 设置ImagePicker每个图片的外部样式类 ---

图片选择器事件 (ImagePicker Events)

事件名称 说明 返回值 备注
bind:linchange 新增图片时触发 选中项发生变化时触发 linchange 事件,event.detail = {current: [ 新增项的url信息 ], all: [ 当前urls值 ]} urls格式与传入的urls格式保持一致
bind:linremove 移除图片时触发 图片移除时触发 linremove 事件,event.detail = {current: 移除项的url信息, all: [ 当前urls值 ], index: 移除项的下标} urls格式与传入的urls格式保持一致
bind:linpreview 图片被点击时(预览)触发 图片预览触发 linpreview 事件,event.detail = {current:[ 当前点击项的url信息 ], all: [ 当前urls值 ], index: 点击项的下标} urls格式与传入的urls格式保持一致
bind:linclear 清除图片全部时触发 图片移除时触发 linclear 事件,event.detail = {current: [ 移除项的url信息 ], all: [ 删除前urls值 ]} urls格式与传入的urls格式保持一致
    上次更新: 2019-10-27 21:55:01