#
图片选择器 ImagePicker

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

组件特性

height=200

# 设置最大值

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

# 示例代码

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

# 自定义每行图片的数量

图片选择器内部可以通过size设置每行图片的数量,默认是3张,可选值为 1 - 10。

# 示例代码

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

height=100

# 设置选择图片的质量

通过size-type可以设置图片来源,可选值是original/compressed,或者二者均填,默认是['original', 'compressed']

注意事项

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

# 示例代码

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

# 自定义图片添加按钮

通过 <slot> 的方式可以自定义ImagePicker组件的添加图片部分。

# 示例代码

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

height=150

# 图片选择器属性

参数 说明 类型 可选值 默认值
urls 初始图片链接,仅支持字符串数据 Array []
cells 初始图片链接,对象数组格式 Array null
count 最多可以选择的图片张数 String/Number 9
size 每行可显示的个数 String/Number 1-9 3
mode 图片剪裁、缩放的模式 String 参考官方image组件的mode属性可选值 aspectFit
size-type 所选的图片的尺寸 String original/compressed original
preview 是否可以预览 Boolean true/false true
remove 点击删除按钮是否删除图片 Boolean true/false true
max-image-size 图片最大限制,单位字节 Number 10000000

提示

urls 和 cells 两个属性中仅需选择其一传入即可,两者区别如下:

  • 若你的链接为如下字符串数组格式,请使用 urls 属性

    [
        'https://talelin.com/logo1.png',
        'https://talelin.com/logo2.png'
    ]
    
  • 若你的链接为如下对象数组格式,请使用 cells 属性

    // url 属性名称不可改变,其余部分可随意
    [{
        url:'https://talelin.com/logo1.png',
        name:'桔子'
    },{
        url:'https://talelin.com/logo2.png',
        name:'juzi',
        sex:'男'
    }]
    

# 图片选择器外部样式类

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

# 图片选择器事件

事件名称 说明 返回值 备注
bind:linchange 新增图片时触发 选中项发生变化时触发 linchange 事件,event.detail = {current: [ 新增项的url信息 ], all: [ 当前urls值 ]} urls格式为字符串数组
bind:linremove 移除图片时触发 图片移除时触发 linremove 事件,event.detail = {current: 移除项的url信息, all: [ 当前urls值 ], index: 移除项的下标} urls格式为字符串数组
bind:linpreview 图片被点击时(预览)触发 图片预览触发 linpreview 事件,event.detail = {current:[ 当前点击项的url信息 ], all: [ 当前urls值 ], index: 点击项的下标} urls格式为字符串数组
bind:linclear 清除图片全部时触发 图片移除时触发 linclear 事件,event.detail = {current: [ 移除项的url信息 ], all: [ 删除前urls值 ]} urls格式为字符串数组
bind:linoversize 新增图片大小超过max-image-size设置的值时触发 event.detail = {all:[当前urls值],oversize:[超过max-image-size限制的图片值],current:[当前值]}
bind:linremovetap 点击删除按钮

    # 开放函数 (opens new window)

    函数名 说明 备注
    linRemoveImage(imageIndex) 删除某个图片 optinos 为 Object 类型,属性为 Toast 支持的所有属性
    linClearImage() 清空所有图片 不会触发 linremove 事件
    linGetValue() 获取所有 url 图片链接 url 格式为 Array