效果
使用方法
<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);
}
}
};
</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 预览图片) |