ImagePicker 图片选择器

基本用法

  1. <nut-imagepicker
  2. @imgMsg="imgMsg"
  3. :imgList.sync="imgList1"
  4. >
  5. </nut-imagepicker>

指定宽度和高度都是120px,图片间距是10px

  1. <nut-imagepicker
  2. @imgMsg="imgMsg"
  3. :width="120"
  4. :height="120"
  5. :margin="10"
  6. :imgList.sync="imgList2"
  7. >
  8. </nut-imagepicker>

允许上传的最大数量是4张

  1. <nut-imagepicker
  2. @imgMsg="imgMsg"
  3. :max="4"
  4. >
  5. </nut-imagepicker>

支持多图选择

  1. <nut-imagepicker
  2. @imgMsg="imgMsg"
  3. :ismultiple="true"
  4. >
  5. </nut-imagepicker>

支持长按删除图片

  1. <nut-imagepicker
  2. @imgMsg="imgMsg"
  3. delMode="longtap"
  4. :longTapTime="longTapTime"
  5. >
  6. </nut-imagepicker>

图片之后自动上传除图片

  1. <nut-imagepicker
  2. @imgMsg="imgMsg"
  3. autoUpload="true"
  4. >
  5. </nut-imagepicker>
  1. export default {
  2. data() {
  3. return {
  4. longTapTime: 1000,
  5. imgList1:[
  6. {
  7. id:1,
  8. src:"//img1.360buyimg.com/da/jfs/t1/4436/26/9691/78074/5bad0668E7ce89ec6/c234b749ae9e7332.jpg"
  9. }
  10. ],
  11. imgList2:[
  12. {
  13. id:1,
  14. src:"//img1.360buyimg.com/da/jfs/t1/4436/26/9691/78074/5bad0668E7ce89ec6/c234b749ae9e7332.jpg"
  15. }
  16. ]
  17. };
  18. },
  19. methods: {
  20. imgMsg(data){
  21. if(data.code == 1) {
  22. alert('upload');
  23. }
  24. console.log(this.imgList2)
  25. console.log(data);//code 1 自动上传 2 不上传只展示图片 3 删除图片 4 预览图片
  26. }
  27. }
  28. };

Prop

字段说明类型默认值
animation是否使用过渡动画Booleantrue
width图片宽度String/Number100
height图片高度String/Number100
margin图片间距String/Number5
max允许上传的最大数量String/Number9
accept允许上传的图片类型Stringimage/*
ismultiple是否开启多张图片上传Booleanfalse
delMode删除图片的方式(tap、longtap)Stringtap
longTapTime长按的时间Number500
autoUpload选择完成之后是否直接上传Booleanfalse
imgList图片列表 (注意:绑定时必须:imgList.sync,加sync修饰符)Array[]

Event

字段说明回调参数
imgMsg选择图片之后的回调函数返回Object(包含code值:1 自动上传 2 不上传,只展示 3 删除图片 4 预览图片)

ImagePicker 图片选择器 - 图1