From cccf898581b27258a9110930cd52f40cac36cf25 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期五, 25 十一月 2022 09:50:58 +0800
Subject: [PATCH] 文书路由修改
---
src/components/myUpload/index.vue | 124 ++++++++++++++++++++++++++---------------
1 files changed, 78 insertions(+), 46 deletions(-)
diff --git a/src/components/myUpload/index.vue b/src/components/myUpload/index.vue
index 41d202d..799794e 100644
--- a/src/components/myUpload/index.vue
+++ b/src/components/myUpload/index.vue
@@ -1,9 +1,14 @@
<template>
<div class="my-upload">
- <el-upload
+ <div v-if="pictureList.length > 0" class="image-box">
+ <div v-for="image in pictureList" class="image-box-item">
+ <i @click="handleDeletePicture(image)" class="el-icon-delete image-delete-icon"></i>
+ <el-image :key="image" class="image-content" :src="image" ></el-image>
+ </div>
+ </div>
+ <el-upload
:file-list="fileList"
- class="upload-demo"
- action="/sccg/file/medias"
+ action="/sccg/file/medias"
:multiple="multiple"
:show-file-list="flag"
:before-upload="beforeUpload"
@@ -13,10 +18,10 @@
:list-type="listType"
:on-remove="handleRemove"
:headers="getToken()">
- <div class="upload-btn" :style="{'height':btnHeight,'width':btnWidth}">
- <i class="el-icon-plus"></i>
- <span>涓婁紶鍥剧墖</span>
- </div>
+ <div class="upload-btn">
+ <i class="el-icon-plus"></i>
+ <span>涓婁紶鍥剧墖</span>
+ </div>
</el-upload>
</div>
</template>
@@ -27,15 +32,11 @@
// 鏂囦欢鍒楄〃
fileList: [],
// 鏄惁鏄剧ず鏂囦欢鍒楄〃
- flag: true,
+ flag: false,
// 澶氶��
multiple: false,
// 闄愬埗
limit: 4,
- // 鎸夐挳楂樺害
- btnHeight: '120px',
- // 鎸夐挳瀹藉害
- btnWidth: '120px',
// 鏂囦欢鍒楄〃绫诲瀷
listType: 'picture-card'
};
@@ -69,7 +70,6 @@
},
// 涓婁紶澶辫触鍥炶皟
handleError(err, file, fileList) {
- console.log(err);
this.$message({
type:'error',
message:err
@@ -83,13 +83,13 @@
return { Authorization: tokenHead + token }
}
},
- // 棰勮
- handlePreview(file){
- console.log(file)
- },
// 绉婚櫎鏂囦欢
handleRemove(file, fileList){
this.$emit('delPictureUrl',{url:file.response.data.url1});
+ },
+
+ handleDeletePicture(imageUrl) {
+ this.$emit('delPictureUrl', { url: imageUrl });
}
},
props: {
@@ -101,44 +101,76 @@
delPictureUrl:{
type:Function,
default:()=>{}
- }
- }
+ },
+ pictureList: {
+ type: Array,
+ default: () => []
+ }
+ },
}
</script>
<style lang="scss" scoped>
.my-upload {
- .upload-demo {
- display: flex;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ margin-right: 5px;
+
+ .upload-btn {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+ width: 100px;
+ height: 100px;
+
+ &:hover i{
+ color: #409eff;
}
+
+ i {
+ font-size: 30px;
+ font-weight: 650;
+ }
+
+ span {
+ line-height: 22px;
+ }
+ }
+ .image-box {
+ display: flex;
+ height: 100px;
+ margin: 0 10px;
+
+ .image-content {
+ width: 100px;
+ height: 100px;
+ }
+ .image-delete-icon {
+ position: relative;
+ bottom: calc(100% - 50px);
+ left: calc(100% - 50px);
+ opacity: 0;
+ }
+
+ .image-box-item:hover {
+ color: #ffffff;
+ opacity: .5;
+ .image-delete-icon {
+ z-index: 2;
+ opacity: 1;
+ }
+ }
+ }
:deep(.el-upload--picture-card) {
- width: 120px;
- height: 120px;
+ width: 100px;
+ height: 100px;
}
:deep(.el-upload-list__item){
- width: 120px;
- height: 120px;
- }
- .upload-btn {
- // background-color: rgba(249, 249, 249, 1);
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- border-radius: 4px;
-
- &:hover i{
- color: #409eff;
- }
-
- i {
- font-size: 30px;
- font-weight: 650;
- }
-
- span {
- line-height: 22px;
- }
+ width: 100px;
+ height: 100px;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0