feat(uploader): add single uploader preview image style (#7776)

add single uploader preview image style
youzan · Dec 21, 2020 · 0e68369 · 0e68369
1 parent cdd4831
commit 0e68369
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 6 deletions.
diff --git a/src/uploader/README.md b/src/uploader/README.md
@@ -191,6 +191,39 @@ Use `disabled` prop to disable uploader.
 <van-uploader disabled />
 ```
 
+### Customize Single Preview Image Style
+
+```html
+<van-uploader v-model="fileList" :deletable="false" />
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  data() {
+    return {
+      fileList = [
+        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+        {
+          url: 'https://img.yzcdn.cn/vant/sand.jpg',
+          deletable: true,
+          beforeDelete: () => {
+            Toast('Customize the events and styles of a single preview image');
+          },
+        },
+        {
+          url: 'https://img.yzcdn.cn/vant/tree.jpg',
+          deletable: true,
+          imageFit: 'contain',
+          previewSize: 120,
+        },
+      ];
+    }
+  }
+};
+```
+
 ## API
 
 ### Props

diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md
@@ -219,6 +219,41 @@ export default {
 <van-uploader disabled />
 ```
 
+### 自定义单个图片预览
+
+在 `v-model` 数组中设置单个预览图片属性，支持 `imageFit`,`deletable`,`previewSize`,`beforeDelete`
+
+```html
+<van-uploader v-model="fileList" :deletable="false" />
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  data() {
+    return {
+      fileList = [
+        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+        {
+          url: 'https://img.yzcdn.cn/vant/sand.jpg',
+          deletable: true,
+          beforeDelete: () => {
+            Toast('自定义单个预览图片的事件和样式');
+          },
+        },
+        {
+          url: 'https://img.yzcdn.cn/vant/tree.jpg',
+          deletable: true,
+          imageFit: 'contain',
+          previewSize: 120,
+        },
+      ];
+    }
+  }
+};
+```
+
 ## API
 
 ### Props

diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
@@ -48,6 +48,15 @@
     <demo-block :title="t('disabled')">
       <van-uploader :after-read="afterRead" disabled />
     </demo-block>
+
+    <demo-block :title="t('customPreviewImage')">
+      <van-uploader
+        v-model="fileList5"
+        multiple
+        accept="*"
+        :deletable="false"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -69,6 +78,8 @@ export default {
       invalidType: '请上传 jpg 格式图片',
       customUpload: '自定义上传样式',
       previewCover: '自定义预览样式',
+      customPreviewImage: '自定义单个图片预览',
+      deleteMessage: '删除前置处理',
     },
     'en-US': {
       status: 'Upload Status',
@@ -85,6 +96,8 @@ export default {
       invalidType: 'Please upload an image in jpg format',
       customUpload: 'Custom Upload Area',
       previewCover: 'Preview Cover',
+      customPreviewImage: 'Custom single prevew image',
+      deleteMessage: 'Before Delete',
     },
   },
 
@@ -97,6 +110,22 @@ export default {
       fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
       fileList3: [],
       fileList4: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
+      fileList5: [
+        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+        {
+          url: 'https://img.yzcdn.cn/vant/sand.jpg',
+          deletable: true,
+          beforeDelete: () => {
+            this.$toast(this.t('deleteMessage'));
+          },
+        },
+        {
+          url: 'https://img.yzcdn.cn/vant/tree.jpg',
+          deletable: true,
+          imageFit: 'contain',
+          previewSize: 120,
+        },
+      ],
       statusFileList: [],
       previewCoverFiles: [],
     };

diff --git a/src/uploader/index.js b/src/uploader/index.js
@@ -212,8 +212,9 @@ export default createComponent({
     },
 
     onDelete(file, index) {
-      if (this.beforeDelete) {
-        const response = this.beforeDelete(file, this.getDetail(index));
+      const beforeDelete = file.beforeDelete ?? this.beforeDelete;
+      if (beforeDelete) {
+        const response = beforeDelete(file, this.getDetail(index));
 
         if (!response) {
           return;
@@ -306,7 +307,8 @@ export default createComponent({
     },
 
     genPreviewItem(item, index) {
-      const showDelete = item.status !== 'uploading' && this.deletable;
+      const deleteAble = item.deletable ?? this.deletable;
+      const showDelete = item.status !== 'uploading' && deleteAble;
 
       const DeleteIcon = showDelete && (
         <div
@@ -329,13 +331,16 @@ export default createComponent({
         <div class={bem('preview-cover')}>{PreviewCoverContent}</div>
       );
 
+      const previewSize = item.previewSize ?? this.previewSize;
+      const imageFit = item.imageFit ?? this.imageFit;
+
       const Preview = isImageFile(item) ? (
         <Image
-          fit={this.imageFit}
+          fit={imageFit}
           src={item.content || item.url}
           class={bem('preview-image')}
-          width={this.previewSize}
-          height={this.previewSize}
+          width={previewSize}
+          height={previewSize}
           lazyLoad={this.lazyLoad}
           onClick={() => {
             this.onPreviewImage(item);

diff --git a/src/uploader/test/__snapshots__/demo.spec.js.snap b/src/uploader/test/__snapshots__/demo.spec.js.snap
@@ -143,5 +143,35 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-uploader">
+      <div class="van-uploader__wrapper">
+        <div class="van-uploader__preview">
+          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
+                <!----></i></div>
+          </div>
+        </div>
+        <div class="van-uploader__preview">
+          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
+                <!----></i></div>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
+        </div>
+        <div class="van-uploader__preview">
+          <div class="van-image van-uploader__preview-image" style="width: 120px; height: 120px;"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: contain;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
+                <!----></i></div>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
+        </div>
+        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
+            <!----></i><input multiple="multiple" type="file" accept="*" class="van-uploader__input"></div>
+      </div>
+    </div>
+  </div>
 </div>
 `;