Commit 88603ab8fec23f69535eff877e7633366468d86f
1 parent
860049d2
perf: upload components
Showing
2 changed files
with
23 additions
and
8 deletions
yudao-ui-admin-vue3/src/components/UploadFile/src/UploadFile.vue
| ... | ... | @@ -5,8 +5,8 @@ |
| 5 | 5 | :multiple="props.limit > 1" |
| 6 | 6 | name="file" |
| 7 | 7 | v-model="valueRef" |
| 8 | - :file-list="fileList" | |
| 9 | - :show-file-list="false" | |
| 8 | + v-model:file-list="fileList" | |
| 9 | + :show-file-list="true" | |
| 10 | 10 | :action="updateUrl" |
| 11 | 11 | :headers="uploadHeaders" |
| 12 | 12 | :limit="props.limit" |
| ... | ... | @@ -15,9 +15,18 @@ |
| 15 | 15 | :on-success="handleFileSuccess" |
| 16 | 16 | :on-error="excelUploadError" |
| 17 | 17 | :on-remove="handleRemove" |
| 18 | + :on-preview="handlePreview" | |
| 18 | 19 | class="upload-file-uploader" |
| 19 | 20 | > |
| 20 | - <Icon icon="ep:upload-filled" /> | |
| 21 | + <el-button type="primary"><Icon icon="ep:upload-filled" />选取文件</el-button> | |
| 22 | + <template v-if="isShowTip" #tip> | |
| 23 | + <div style="font-size: 8px"> | |
| 24 | + 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> | |
| 25 | + </div> | |
| 26 | + <div style="font-size: 8px"> | |
| 27 | + 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件 | |
| 28 | + </div> | |
| 29 | + </template> | |
| 21 | 30 | </el-upload> |
| 22 | 31 | </div> |
| 23 | 32 | </template> |
| ... | ... | @@ -38,7 +47,7 @@ const props = defineProps({ |
| 38 | 47 | fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg'] |
| 39 | 48 | fileSize: propTypes.number.def(5), // 大小限制(MB) |
| 40 | 49 | limit: propTypes.number.def(5), // 数量限制 |
| 41 | - isShowTip: propTypes.bool.def(false) // 是否显示提示 | |
| 50 | + isShowTip: propTypes.bool.def(true) // 是否显示提示 | |
| 42 | 51 | }) |
| 43 | 52 | // ========== 上传相关 ========== |
| 44 | 53 | const valueRef = ref(props.modelValue) |
| ... | ... | @@ -135,6 +144,9 @@ const handleRemove = (file) => { |
| 135 | 144 | emit('update:modelValue', listToString(fileList.value)) |
| 136 | 145 | } |
| 137 | 146 | } |
| 147 | +const handlePreview: UploadProps['onPreview'] = (uploadFile) => { | |
| 148 | + console.log(uploadFile) | |
| 149 | +} | |
| 138 | 150 | // 对象转成指定字符串分隔 |
| 139 | 151 | const listToString = (list: UploadUserFile[], separator?: string) => { |
| 140 | 152 | let strs = '' |
| ... | ... | @@ -149,19 +161,22 @@ const listToString = (list: UploadUserFile[], separator?: string) => { |
| 149 | 161 | .upload-file-uploader { |
| 150 | 162 | margin-bottom: 5px; |
| 151 | 163 | } |
| 152 | -.upload-file-list .el-upload-list__item { | |
| 164 | +:deep(.upload-file-list .el-upload-list__item) { | |
| 153 | 165 | border: 1px solid #e4e7ed; |
| 154 | 166 | line-height: 2; |
| 155 | 167 | margin-bottom: 10px; |
| 156 | 168 | position: relative; |
| 157 | 169 | } |
| 158 | -.upload-file-list .ele-upload-list__item-content { | |
| 170 | +:deep(.el-upload-list__item-file-name) { | |
| 171 | + max-width: 250px; | |
| 172 | +} | |
| 173 | +:deep(.upload-file-list .ele-upload-list__item-content) { | |
| 159 | 174 | display: flex; |
| 160 | 175 | justify-content: space-between; |
| 161 | 176 | align-items: center; |
| 162 | 177 | color: inherit; |
| 163 | 178 | } |
| 164 | -.ele-upload-list__item-content-action .el-link { | |
| 179 | +:deep(.ele-upload-list__item-content-action .el-link) { | |
| 165 | 180 | margin-right: 10px; |
| 166 | 181 | } |
| 167 | 182 | </style> | ... | ... |
yudao-ui-admin-vue3/src/components/UploadFile/src/UploadImg.vue