|
@@ -1,15 +1,15 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div>
|
|
<div>
|
|
|
<h4>基本用法</h4>
|
|
<h4>基本用法</h4>
|
|
|
- <nut-imagepicker @imgMsg="imgMsg" :imgList="imgList1"></nut-imagepicker>
|
|
|
|
|
|
|
+ <nut-imagepicker @imgMsg="imgMsg" :imgList.sync="imgList1"></nut-imagepicker>
|
|
|
<h4>指定宽度和高度都是120px,图片间距是10px</h4>
|
|
<h4>指定宽度和高度都是120px,图片间距是10px</h4>
|
|
|
- <nut-imagepicker @imgMsg="imgMsg" :width="120" :height="120" :margin="10" :imgList="imgList2"></nut-imagepicker>
|
|
|
|
|
|
|
+ <nut-imagepicker @imgMsg="imgMsg" :width="120" :height="120" :margin="10" :imgList.sync="imgList2"></nut-imagepicker>
|
|
|
<h4>允许上传的最大数量是4张</h4>
|
|
<h4>允许上传的最大数量是4张</h4>
|
|
|
<nut-imagepicker @imgMsg="imgMsg" :max="4"></nut-imagepicker>
|
|
<nut-imagepicker @imgMsg="imgMsg" :max="4"></nut-imagepicker>
|
|
|
<h4>支持多图选择</h4>
|
|
<h4>支持多图选择</h4>
|
|
|
<nut-imagepicker @imgMsg="imgMsg" :ismultiple=true></nut-imagepicker>
|
|
<nut-imagepicker @imgMsg="imgMsg" :ismultiple=true></nut-imagepicker>
|
|
|
<h4>支持长按删除图片</h4>
|
|
<h4>支持长按删除图片</h4>
|
|
|
- <nut-imagepicker @imgMsg="imgMsg" delMode="longtap"></nut-imagepicker>
|
|
|
|
|
|
|
+ <nut-imagepicker @imgMsg="imgMsg" :imgList.sync="imgList2" delMode="longtap"></nut-imagepicker>
|
|
|
<h4>选择完成图片之后自动上传</h4>
|
|
<h4>选择完成图片之后自动上传</h4>
|
|
|
<nut-imagepicker @imgMsg="imgMsg" autoUpload="true"></nut-imagepicker>
|
|
<nut-imagepicker @imgMsg="imgMsg" autoUpload="true"></nut-imagepicker>
|
|
|
</div>
|
|
</div>
|
|
@@ -34,10 +34,11 @@ export default {
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- imgMsg:(data) => {
|
|
|
|
|
|
|
+ imgMsg(data){
|
|
|
if(data.code == 1) {
|
|
if(data.code == 1) {
|
|
|
alert('upload');
|
|
alert('upload');
|
|
|
}
|
|
}
|
|
|
|
|
+ console.log(this.imgList2)
|
|
|
console.log(data);//code 1 自动上传 2 不上传只展示图片 3 删除图片 4 预览图片
|
|
console.log(data);//code 1 自动上传 2 不上传只展示图片 3 删除图片 4 预览图片
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|