From 3cd886785bb545e4e2c68a8517101e13b319a3c6 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期二, 05 一月 2021 20:33:41 +0800
Subject: [PATCH] 图片组件添加预览功能
---
ruoyi-ui/src/components/ImageUpload/index.vue | 13 ++++++++-----
1 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue
index 67fa99c..ce540eb 100644
--- a/ruoyi-ui/src/components/ImageUpload/index.vue
+++ b/ruoyi-ui/src/components/ImageUpload/index.vue
@@ -17,9 +17,12 @@
</div>
</el-image>
<div v-else class="image">
- <el-image :src="value" />
+ <el-image :src="value" :style="`width:150px;height:150px;`" fit="fill"/>
<div class="mask">
<div class="actions">
+ <span title="棰勮" @click.stop="dialogVisible = true">
+ <i class="el-icon-zoom-in" />
+ </span>
<span title="绉婚櫎" @click.stop="removeImage">
<i class="el-icon-delete" />
</span>
@@ -27,6 +30,9 @@
</div>
</div>
</el-upload>
+ <el-dialog :visible.sync="dialogVisible" title="棰勮" width="800" append-to-body>
+ <img :src="value" style="display: block; max-width: 100%; margin: 0 auto;">
+ </el-dialog>
</div>
</template>
@@ -36,6 +42,7 @@
export default {
data() {
return {
+ dialogVisible: false,
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
headers: {
Authorization: "Bearer " + getToken(),
@@ -76,10 +83,6 @@
</script>
<style scoped lang="scss">
-.avatar {
- width: 100%;
- height: 100%;
-}
.image {
position: relative;
.mask {
--
Gitblit v1.9.3