Commit 126f4e4cffe9ebdad4f765392a2f2b5ec299d273
1 parent
f73ac45d
Exists in
master
and in
2 other branches
feat: 新增图片上传只读模式
Showing
2 changed files
with
41 additions
and
3 deletions
Show diff stats
examples/views/docs/component/upload.md
| @@ -128,6 +128,30 @@ export default { | @@ -128,6 +128,30 @@ export default { | ||
| 128 | 128 | ||
| 129 | ::: | 129 | ::: |
| 130 | 130 | ||
| 131 | +## 只读模式 | ||
| 132 | + | ||
| 133 | +可配置只读模式用于显示 | ||
| 134 | + | ||
| 135 | +::: snippet `readonly`开启只读模式 | ||
| 136 | + | ||
| 137 | +```html | ||
| 138 | +<template> | ||
| 139 | + <z-upload v-model="model" corner-close readonly></z-upload> | ||
| 140 | +</template> | ||
| 141 | + | ||
| 142 | +<script> | ||
| 143 | +export default { | ||
| 144 | + data() { | ||
| 145 | + return { | ||
| 146 | + 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', | ||
| 147 | + } | ||
| 148 | + }, | ||
| 149 | +} | ||
| 150 | +</script> | ||
| 151 | +``` | ||
| 152 | + | ||
| 153 | +::: | ||
| 154 | + | ||
| 131 | ## API | 155 | ## API |
| 132 | 156 | ||
| 133 | ## Attribute 属性 | 157 | ## Attribute 属性 |
packages/upload/index.vue
| @@ -20,7 +20,7 @@ | @@ -20,7 +20,7 @@ | ||
| 20 | <span v-else class="el-upload-list__item-preview" @click="onDownload(url)"> | 20 | <span v-else class="el-upload-list__item-preview" @click="onDownload(url)"> |
| 21 | <i class="el-icon-download"></i> | 21 | <i class="el-icon-download"></i> |
| 22 | </span> | 22 | </span> |
| 23 | - <span v-if="!disabled" class="el-upload-list__item-delete" @click="onRemove(url, index)"> | 23 | + <span v-if="!disabled && !readonly" class="el-upload-list__item-delete" @click="onRemove(url, index)"> |
| 24 | <i class="el-icon-delete"></i> | 24 | <i class="el-icon-delete"></i> |
| 25 | </span> | 25 | </span> |
| 26 | </div> | 26 | </div> |
| @@ -33,14 +33,14 @@ | @@ -33,14 +33,14 @@ | ||
| 33 | </div> | 33 | </div> |
| 34 | </div> | 34 | </div> |
| 35 | </li> | 35 | </li> |
| 36 | - <div v-if="cornerClose && !disabled" class="corner-close" @click="onRemove(url, index)"> | 36 | + <div v-if="cornerClose && !disabled && !readonly" class="corner-close" @click="onRemove(url, index)"> |
| 37 | <i class="el-icon-close"></i> | 37 | <i class="el-icon-close"></i> |
| 38 | </div> | 38 | </div> |
| 39 | </div> | 39 | </div> |
| 40 | </drag-field> | 40 | </drag-field> |
| 41 | <!-- 默认上传按钮 --> | 41 | <!-- 默认上传按钮 --> |
| 42 | <el-upload | 42 | <el-upload |
| 43 | - v-if="!limit || imageList.length < limit" | 43 | + v-if="!readonly && (!limit || imageList.length < limit)" |
| 44 | :action="action" | 44 | :action="action" |
| 45 | :data="data" | 45 | :data="data" |
| 46 | :name="name" | 46 | :name="name" |
| @@ -117,6 +117,8 @@ export default { | @@ -117,6 +117,8 @@ export default { | ||
| 117 | value: String, | 117 | value: String, |
| 118 | // 是否禁用 | 118 | // 是否禁用 |
| 119 | disabled: Boolean, | 119 | disabled: Boolean, |
| 120 | + // 是否只读 | ||
| 121 | + readonly: Boolean, | ||
| 120 | // 是否支持多选文件 | 122 | // 是否支持多选文件 |
| 121 | multiple: Boolean, | 123 | multiple: Boolean, |
| 122 | // 最大上传数量 | 124 | // 最大上传数量 |
| @@ -216,6 +218,12 @@ export default { | @@ -216,6 +218,12 @@ export default { | ||
| 216 | if (['.zip', '.rar', '.7z'].includes(fileType)) { | 218 | if (['.zip', '.rar', '.7z'].includes(fileType)) { |
| 217 | return 'zip'; | 219 | return 'zip'; |
| 218 | } | 220 | } |
| 221 | + if (['.mp3', 'wav', 'wma', 'ogg', 'aac', 'm4a'].includes(fileType)) { | ||
| 222 | + return 'audio'; | ||
| 223 | + } | ||
| 224 | + if (['.mp4', '.mkv', 'wmv', 'mov', 'avi', 'rm', 'rmvb', 'flv', '3gp'].includes(fileType)) { | ||
| 225 | + return 'video'; | ||
| 226 | + } | ||
| 219 | return ''; | 227 | return ''; |
| 220 | }, | 228 | }, |
| 221 | }, | 229 | }, |
| @@ -398,6 +406,12 @@ export default { | @@ -398,6 +406,12 @@ export default { | ||
| 398 | &.zip { | 406 | &.zip { |
| 399 | 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"); | 407 | 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"); |
| 400 | } | 408 | } |
| 409 | + &.audio { | ||
| 410 | + 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"); | ||
| 411 | + } | ||
| 412 | + &.video { | ||
| 413 | + 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"); | ||
| 414 | + } | ||
| 401 | } | 415 | } |
| 402 | /* 上传项外部类，用于撑开布局，显示角标按钮 */ | 416 | /* 上传项外部类，用于撑开布局，显示角标按钮 */ |
| 403 | .el-upload-list__item-wrapper { | 417 | .el-upload-list__item-wrapper { |