feat(uploader): support for initializing the picture list

MPComponent · Sep 28, 2019 · 5a4487d · 5a4487d
1 parent fc2a313
commit 5a4487d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/example/pages/uploader/index.vue b/example/pages/uploader/index.vue
@@ -1,8 +1,17 @@
 <template>
   <page-content title="uploader" desc="图片上传组件，基于 `wx.chooseImage` 和 `wx.previewImage` 实现。">
-    <mp-uploader ref="uploader" @upLoadSuccess="upLoadSuccess" @upLoadFail="upLoadFail" @upLoadComplete="upLoadComplete" @uploadDelete="uploadDelete" :showTip=false :count=2></mp-uploader>
+    <mp-uploader
+      ref="uploader"
+      :initialFileList="['https://avatars0.githubusercontent.com/u/20694238?s=60&v=4']"
+      @upLoadSuccess="upLoadSuccess"
+      @upLoadFail="upLoadFail"
+      @upLoadComplete="upLoadComplete"
+      @uploadDelete="uploadDelete"
+      :showTip="false"
+      :count="2"
+    ></mp-uploader>
     <div class="clear-files">
-      <mp-button size='small' @click="clearFiles">清空已上传文件</mp-button>
+      <mp-button size="small" @click="clearFiles">清空已上传文件</mp-button>
     </div>
   </page-content>
 </template>

diff --git a/src/uploader/index.vue b/src/uploader/index.vue
@@ -8,12 +8,21 @@
       <div class="weui-uploader__files" id="uploaderFiles">
         <div v-for="(item ,index) in files" :key="index">
           <div class="weui-uploader__file">
-            <image class="weui-uploader__img" :src="item" mode="aspectFill" @click="predivImage" :id="item" />
+            <image
+              class="weui-uploader__img"
+              :src="item"
+              mode="aspectFill"
+              @click="predivImage"
+              :id="item"
+            />
             <div class="delete-icon" @click="deleteImg" :id="item" :data-index="index" :key="index"></div>
           </div>
         </div>
       </div>
-      <div class="weui-uploader__input-box" v-show="!isMaxHiddenChoose || (files.length < maxLength)">
+      <div
+        class="weui-uploader__input-box"
+        v-show="!isMaxHiddenChoose || (files.length < maxLength)"
+      >
         <div class="weui-uploader__input" @click="chooseImage"></div>
       </div>
     </div>
@@ -24,7 +33,7 @@
 export default {
   data() {
     return {
-      files: []
+      files: this.initialFileList.slice(0, this.maxLength)
     };
   },
   props: {
@@ -43,6 +52,10 @@ export default {
     isMaxHiddenChoose: {
       type: Boolean,
       default: false
+    },
+    initialFileList: {
+      type: Array,
+      default: () => []
     }
   },
   methods: {
@@ -127,7 +140,7 @@ export default {
   z-index: 5;
 }
 .delete-icon::before {
-  content: '';
+  content: "";
   width: 26rpx;
   height: 4rpx;
   position: absolute;