From a118738d0f9e8e466aa2b908ca139372eead5194 Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期二, 05 一月 2021 16:13:22 +0800 Subject: [PATCH] 单图上传组件添加移除 --- ruoyi-ui/src/components/ImageUpload/index.vue | 34 ++++++++++++++++++++++++++++++++-- 1 files changed, 32 insertions(+), 2 deletions(-) diff --git a/ruoyi-ui/src/components/UploadImage/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue similarity index 64% rename from ruoyi-ui/src/components/UploadImage/index.vue rename to ruoyi-ui/src/components/ImageUpload/index.vue index 3941006..89f0b40 100644 --- a/ruoyi-ui/src/components/UploadImage/index.vue +++ b/ruoyi-ui/src/components/ImageUpload/index.vue @@ -11,8 +11,21 @@ :headers="headers" style="display: inline-block; vertical-align: top" > - <img v-if="value" :src="value" class="avatar" /> - <i v-else class="el-icon-plus avatar-uploader-icon"></i> + <el-image v-if="!value" :src="value"> + <div slot="error" class="image-slot"> + <i class="el-icon-plus" /> + </div> + </el-image> + <div v-else class="image"> + <el-image :src="value" /> + <div class="mask"> + <div class="actions"> + <span title="移除" @click.stop="removeImage"> + <i class="el-icon-delete" /> + </span> + </div> + </div> + </div> </el-upload> </div> </template> @@ -37,6 +50,9 @@ }, }, methods: { + removeImage() { + this.$emit("input", ""); + }, handleUploadSuccess(res) { this.$emit("input", res.url); this.loading.close(); @@ -65,4 +81,18 @@ width: 100%; height: 100%; } +.image { + position: relative; + .mask { + opacity: 0; + position: absolute; + top: 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.5); + transition: all 0.3s; + } + &:hover .mask { + opacity: 1; + } +} </style> \ No newline at end of file -- Gitblit v1.9.2