ImagePicker 图片选择器

效果

使用方法

<template>
    <div>
        <lc-title title="图片选择器"></lc-title>
        <category title="基本用法" class="mb10"></category>
        <lc-imagepicker @imgMsg="imgMsg" :imgList="imgList1"></lc-imagepicker>
        <category title="指定宽度和高度都是120px,图片间距是10px" class="mb10"></category>
        <lc-imagepicker @imgMsg="imgMsg" :width="120" :height="120" :margin="10" :imgList="imgList2"></lc-imagepicker>
        <category title="允许上传的最大数量是4张" class="mb10"></category>
        <lc-imagepicker @imgMsg="imgMsg" :max="4"></lc-imagepicker>
        <category title="支持多图选择" class="mb10"></category>
        <lc-imagepicker @imgMsg="imgMsg" :ismultiple=true></lc-imagepicker>
        <category title="支持长按删除图片" class="mb10"></category>
        <lc-imagepicker @imgMsg="imgMsg" delMode="longtap"></lc-imagepicker>
        <category title="选择完成图片之后自动上传" class="mb10"></category>
        <lc-imagepicker @imgMsg="imgMsg" autoUpload="true"></lc-imagepicker>
    </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
  components: { LcTitle, Category },
  data() {
    return {
      imgList1:[
        {
          id:1,
          src:"https://dqloa7ej5.lightyy.com/images/lightui/light.png"
        }
      ],
      imgList2:[
        {
          id:1,
          src:"//img1.360buyimg.com/da/jfs/t1/4436/26/9691/78074/5bad0668E7ce89ec6/c234b749ae9e7332.jpg"
        }
      ]
    };
  },
  methods: {
    imgMsg:(data) => {
      if(data.code == 1) {
        alert('upload');
      }
      console.log(data);//code 1 自动上传  2 不上传只展示图片  3 删除图片  4 预览图片
    }
  }
};
</script>

<style lang="less" scoped>
.mb10{margin-bottom: 10px;}
</style>

可配置参数

字段	说明	类型	默认值
animation	是否使用过渡动画	Boolean	true
width	图片宽度	String/Number	100
height	图片高度	String/Number	100
margin	图片间距	String/Number	5
max	允许上传的最大数量	String/Number	9
accept	允许上传的图片类型	String	image/*
ismultiple	是否开启多张图片上传	Boolean	false
delMode	删除图片的方式（tap、longtap）	String	tap
autoUpload	选择完成之后是否直接上传	Boolean	false
imgList	图片列表	Array	[]

事件回调

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