ImgPicker图片选择器

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-imgPicker": "/miniprogram_npm/vtuweapp/imgPicker/vtu-imgPicker"
    3. }
    4.

    代码演示

    基础用法

    1. <vtu-imgPicker list="{{imgList}}"> </vtu-imgPicker>
    3. Page({
    4.   data: {
    5.     imgList: [
    6.       {
    7.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/1.png"
    8.       },
    9.       {
    10.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/2.png"
    11.       },
    12.       {
    13.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/3.png"
    14.       }
    15.     ]
    16.   }
    17. })
    18.  
    19.

    自定义图片数量

    1. <vtu-imgPicker count="3" list="{{imgList}}"> </vtu-imgPicker>
    3. Page({
    4.   data: {
    5.     imgList: [
    6.       {
    7.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/1.png"
    8.       },
    9.       {
    10.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/2.png"
    11.       },
    12.       {
    13.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/3.png"
    14.       }
    15.     ]
    16.   }
    17. })
    18.  
    19.

    自定义每行数量

    1. <vtu-imgPicker col="4" list="{{imgList}}"> </vtu-imgPicker>
    3. Page({
    4.   data: {
    5.     imgList: [
    6.       {
    7.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/1.png"
    8.       },
    9.       {
    10.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/2.png"
    11.       },
    12.       {
    13.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/3.png"
    14.       }
    15.     ]
    16.   }
    17. })
    18.  
    19.

    不可删除

    1. <vtu-imgPicker col="4" list="{{imgList}}" delete="{{false}}"> </vtu-imgPicker>
    3. Page({
    4.   data: {
    5.     imgList: [
    6.       {
    7.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/1.png"
    8.       },
    9.       {
    10.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/2.png"
    11.       },
    12.       {
    13.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/3.png"
    14.       }
    15.     ]
    16.   }
    17. })
    18.  
    19.

    监听事件

    1. <vtu-imgPicker col="4" list="{{imgList}}" bind:change="change" bind:remove="remove" bind:preview="preview"></vtu-imgPicker>
    3. Page({
    4.   data: {
    5.     imgList: [
    6.       {
    7.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/1.png"
    8.       },
    9.       {
    10.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/2.png"
    11.       },
    12.       {
    13.         url: "https://activity.vtuzx.com/doc/vtuui/weapp/avatar/3.png"
    14.       }
    15.     ]
    16.   },
    17.   change: function (e) {
    18.     wx.showToast({
    19.       title: "添加了图片",
    20.       icon: 'none',
    21.       duration: 2000
    22.     });
    23.     console.log("添加了图片", e)
    24.   },
    25.   remove: function (e) {
    26.     wx.showToast({
    27.       title: "移除了图片",
    28.       icon: 'none',
    29.       duration: 2000
    30.     });
    31.     console.log("移除了图片", e)
    32.   },
    33.   preview: function (e) {
    34.     wx.showToast({
    35.       title: "预览了图片",
    36.       icon: 'none',
    37.       duration: 2000
    38.     });
    39.     console.log("预览了图片", e)
    40.   }
    41. });
    42.  
    43.

    图片大小限制

    <vtu-imgPicker col="4" list="{{imgList}}" max-size="1024"> </vtu-imgPicker>

    图片宽度限制（max-width: 500px）

    <vtu-imgPicker col="4" list="{{imgList}}" max-width="500"> </vtu-imgPicker>

    图片高度限制（max-height: 500px）

    <vtu-imgPicker col="4" list="{{imgList}}" max-height="500"> </vtu-imgPicker>

    组件参数

    Props

    参数说明类型默认值必填
    col每行图片数量Number-否
    list图片数组Array-否
    mode图片裁剪、缩放的模式StringaspectFill否
    upload-icon自定义上传图片图标String-否
    count最多可以选择的图片张数Number9否
    size-type所选的图片的尺寸Array['original', 'compressed']否
    source-type选择图片的来源Array['album', 'camera']否
    preview是否可预览Booleantrue否
    delete是否可删除Booleantrue否
    max-size图片最大尺寸Number-否
    max-width图片最大宽度Number-否
    max-height图片最大高度Number-否

    Events

    事件说明返回值
    bind:change新增图片时触发选中项发生变化时触发 change 事件，event.detail = {current: [ 新增项的url信息 ], all: [ 当前urls值 ]}
    bind:remove移除图片时触发图片移除时触发 remove 事件，event.detail = {current: 移除项的url信息, all: [ 当前urls值 ], index: 移除项的下标}
    bind:preview图片被点击时（预览）触发图片预览触发 preview 事件，event.detail = {current:[ 当前点击项的url信息 ], all: [ 当前urls值 ], index: 点击项的下标}

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    ImgPicker 图片选择器 - 图1