From 126f4e4cffe9ebdad4f765392a2f2b5ec299d273 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Sat, 8 May 2021 15:20:51 +0800
Subject: [PATCH] feat: 新增图片上传只读模式

---
 examples/views/docs/component/upload.md | 24 ++++++++++++++++++++++++
 packages/upload/index.vue               | 20 +++++++++++++++++---
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/examples/views/docs/component/upload.md b/examples/views/docs/component/upload.md
index 606c417..140dbc4 100644
--- a/examples/views/docs/component/upload.md
+++ b/examples/views/docs/component/upload.md
@@ -128,6 +128,30 @@ export default {
 
 :::
 
+## 只读模式
+
+可配置只读模式用于显示
+
+::: snippet `readonly`开启只读模式
+
+```html
+<template>
+  <z-upload v-model="model" corner-close readonly></z-upload>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: 'https://zeyi-tms-test.oss-cn-hangzhou.aliyuncs.com/image/null/3a3d0bb1-a5eb-4957-aa7a-54d004769be6.png,https://zeyi-tms-test.oss-cn-hangzhou.aliyuncs.com/image/null/a1a7e2fe-5896-44ed-9935-549050e9444c.png,http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp3,http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4,http://clips.vorwaerts-gmbh.de/big_buck_bunny.pdf',
+    }
+  },
+}
+</script>
+```
+
+:::
+
 ## API
 
 ## Attribute 属性
diff --git a/packages/upload/index.vue b/packages/upload/index.vue
index 4d8bc11..548363c 100644
--- a/packages/upload/index.vue
+++ b/packages/upload/index.vue
@@ -20,7 +20,7 @@
               <span v-else class="el-upload-list__item-preview" @click="onDownload(url)">
                 <i class="el-icon-download"></i>
               </span>
-              <span v-if="!disabled" class="el-upload-list__item-delete" @click="onRemove(url, index)">
+              <span v-if="!disabled && !readonly" class="el-upload-list__item-delete" @click="onRemove(url, index)">
                 <i class="el-icon-delete"></i>
               </span>
             </div>
@@ -33,14 +33,14 @@
               </div>
             </div>
           </li>
-          <div v-if="cornerClose && !disabled" class="corner-close" @click="onRemove(url, index)">
+          <div v-if="cornerClose && !disabled && !readonly" class="corner-close" @click="onRemove(url, index)">
             <i class="el-icon-close"></i>
           </div>
         </div>
       </drag-field>
       <!-- 默认上传按钮 -->
       <el-upload
-        v-if="!limit || imageList.length < limit"
+        v-if="!readonly && (!limit || imageList.length < limit)"
         :action="action"
         :data="data"
         :name="name"
@@ -117,6 +117,8 @@ export default {
     value: String,
     // 是否禁用
     disabled: Boolean,
+    // 是否只读
+    readonly: Boolean,
     // 是否支持多选文件
     multiple: Boolean,
     // 最大上传数量
@@ -216,6 +218,12 @@ export default {
       if (['.zip', '.rar', '.7z'].includes(fileType)) {
         return 'zip';
       }
+      if (['.mp3', 'wav', 'wma', 'ogg', 'aac', 'm4a'].includes(fileType)) {
+        return 'audio';
+      }
+      if (['.mp4', '.mkv', 'wmv', 'mov', 'avi', 'rm', 'rmvb', 'flv', '3gp'].includes(fileType)) {
+        return 'video';
+      }
       return '';
     },
   },
@@ -398,6 +406,12 @@ export default {
     &.zip {
       background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='81' height='81'%3E%3Cpath d='M61.156 685.511h910.222V921.6c0 28.444-24.178 52.622-52.622 52.622H113.778c-28.445 0-52.622-24.178-52.622-52.622V685.511z' fill='%2389D543'/%3E%3Cpath d='M61.156 352.711h910.222v332.8H61.156z' fill='%23FA6A68'/%3E%3Cpath d='M113.778 64h804.978c28.444 0 52.622 24.178 52.622 52.622v236.09H61.156v-236.09C61.156 88.178 85.333 64 113.778 64z' fill='%2360CEF8'/%3E%3Cpath d='M391.111 64H652.8v910.222H391.111z' fill='%23FDB84B'/%3E%3Cpath d='M760.889 442.311v-28.444H270.222v193.422H760.89V442.31zm-35.556 8.533v122.312H305.778V450.844h419.555z' fill='%23FFF'/%3E%3C/svg%3E");
     }
+    &.audio {
+      background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M136.533 0c-12.8 0-26.453 5.12-35.84 15.36-9.386 10.24-15.36 23.04-15.36 35.84v921.6c0 12.8 5.12 26.453 15.36 35.84 10.24 10.24 23.04 15.36 35.84 15.36h750.934c12.8 0 26.453-5.12 35.84-15.36 10.24-10.24 15.36-23.04 15.36-35.84V298.667L640 0H136.533z' fill='%2348CFAD'/%3E%3Cpath d='M938.667 298.667H692.693c-13.184 0-27.221-5.291-36.864-15.787A50.56 50.56 0 0 1 640 245.93V0l298.667 298.667z' fill='%237FEFD3'/%3E%3Cpath d='M682.581 531.925c-14.506-32.682-44.97-46.805-72.533-50.602-27.179-3.84-51.67 1.962-69.76 5.888v250.88c1.92 36.522-19.072 75.69-56.32 98.261-49.493 29.995-108.97 19.2-132.779-24.15-23.808-43.349-2.986-102.826 46.507-132.863 37.973-23.04 81.75-22.059 110.848-.854V477.952l-.17-.085.17-.47v-76.544c0-9.216 7.125-16.853 15.915-16.853a15.787 15.787 0 0 1 14.25 9.6c25.003 22.827 48.64 31.232 74.966 41.899 20.906 8.533 39.594 21.546 51.37 39.381 12.032 17.493 17.152 39.68 17.622 57.173l-.086-.128z' fill='%23FFF'/%3E%3C/svg%3E");
+    }
+    &.video {
+      background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='81' height='81'%3E%3Cpath d='M140.109 3.738c-12.621 0-26.112 5.094-35.354 15.283C95.488 29.21 89.6 41.958 89.6 54.707v917.555c0 12.75 5.043 26.368 15.155 35.687 10.087 10.189 22.733 15.309 35.328 15.309H880.82c12.621 0 26.087-5.12 35.328-15.31 10.112-10.188 15.155-22.937 15.155-35.686v-679.68L645.12 3.738H140.109z' fill='%238286EE'/%3E%3Cpath d='M931.328 292.608h-235.7c-12.62 0-26.086-5.12-35.327-15.309a49.126 49.126 0 0 1-15.155-35.686V3.738l286.182 288.87z' fill='%23AFB2FD'/%3E%3Cpath d='M537.523 744.346H295.526c-24.985 0-45.414-22.887-45.414-50.893V514.099c0-27.98 20.429-50.893 45.414-50.893h241.997c24.96 0 45.389 22.912 45.389 50.893v179.354c0 28.006-20.429 50.893-45.389 50.893m173.952-12.16l-97.792-81.46a21.683 21.683 0 0 1-7.782-16.665V554.88a21.669 21.669 0 0 1 7.782-16.666l97.792-81.459c13.952-11.648 35.047-1.613 35.047 16.64V715.52c0 18.278-21.095 28.314-35.072 16.666' fill='%23FFF'/%3E%3C/svg%3E");
+    }
   }
   /* 上传项外部类，用于撑开布局，显示角标按钮 */
   .el-upload-list__item-wrapper {
--
libgit2 0.21.0