Browse Source

fix:修复imagepicker中imgList双向绑定问题 #187

richard1015 6 years ago
parent
commit
17b4b7922b

+ 5 - 4
src/packages/imagepicker/demo.vue

@@ -1,15 +1,15 @@
 <template>
     <div>
         <h4>基本用法</h4>
-        <nut-imagepicker @imgMsg="imgMsg" :imgList="imgList1"></nut-imagepicker>
+        <nut-imagepicker @imgMsg="imgMsg" :imgList.sync="imgList1"></nut-imagepicker>
         <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>
         <nut-imagepicker @imgMsg="imgMsg" :max="4"></nut-imagepicker>
         <h4>支持多图选择</h4>
         <nut-imagepicker @imgMsg="imgMsg" :ismultiple=true></nut-imagepicker>
         <h4>支持长按删除图片</h4>
-        <nut-imagepicker @imgMsg="imgMsg" delMode="longtap"></nut-imagepicker>
+        <nut-imagepicker @imgMsg="imgMsg" :imgList.sync="imgList2" delMode="longtap"></nut-imagepicker>
         <h4>选择完成图片之后自动上传</h4>
         <nut-imagepicker @imgMsg="imgMsg" autoUpload="true"></nut-imagepicker>
     </div>
@@ -34,10 +34,11 @@ export default {
     };
   },
   methods: {
-    imgMsg:(data) => {
+    imgMsg(data){
       if(data.code == 1) {
         alert('upload');
       }
+      console.log(this.imgList2)
       console.log(data);//code 1 自动上传  2 不上传只展示图片  3 删除图片  4 预览图片
     }
   }

+ 5 - 4
src/packages/imagepicker/doc.md

@@ -5,7 +5,7 @@
 ```html
 <nut-imagepicker
   @imgMsg="imgMsg" 
-  :imgList="imgList1"
+  :imgList.sync="imgList1"
 >
 </nut-imagepicker>
 ```
@@ -18,7 +18,7 @@
   :width="120" 
   :height="120" 
   :margin="10" 
-  :imgList="imgList2"
+  :imgList.sync="imgList2"
 >
 </nut-imagepicker>
 ```
@@ -82,10 +82,11 @@ export default {
     };
   },
   methods: {
-    imgMsg:(data) => {
+    imgMsg(data){
       if(data.code == 1) {
         alert('upload');
       }
+      console.log(this.imgList2)
       console.log(data);//code 1 自动上传  2 不上传只展示图片  3 删除图片  4 预览图片
     }
   }
@@ -105,7 +106,7 @@ export default {
 | ismultiple | 是否开启多张图片上传 | Boolean | false
 | delMode | 删除图片的方式(tap、longtap) | String | tap
 | autoUpload | 选择完成之后是否直接上传 | Boolean | false
-| imgList | 图片列表 | Array | []
+| imgList | 图片列表 (注意:绑定时必须`:imgList.sync`,加sync修饰符) | Array | []
 
 ## Event
 

+ 1 - 0
src/packages/imagepicker/imagepicker.vue

@@ -123,6 +123,7 @@ export default {
         },
         deleteImg(id) {
             this.list = this.list.filter(item => item.id != id);
+            this.$emit('update:imgList',this.list)
             this.$emit('imgMsg',{
                 code:3,
                 msg:id