From 06833fa81269e7f29b8f1c663d38eb1117ab9509 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 13 Aug 2021 14:33:04 +0800
Subject: [PATCH] 图片预览
---
src/views/resource/attach.vue | 33 +++++++++++-----
src/styles/common.scss | 38 +++++++++++++++++--
2 files changed, 56 insertions(+), 15 deletions(-)
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 4507ae7..eb4bded 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -19,12 +19,42 @@
//通用配置
@import './normalize.scss';
-a{
+a {
text-decoration: none;
- color:#333;
+ color: #333;
}
-*{
+
+* {
outline: none;
}
+
//滚动条样式
-@include scrollBar;
\ No newline at end of file
+@include scrollBar;
+
+
+.see-img-box {
+
+ .el-dialog {
+ width: 840px;
+ height: 540px;
+
+ .el-dialog__body {
+ padding: 4px;
+ position: relative;
+ height: calc(100% - 62px);
+ }
+
+ img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ height: calc(100% - 8px);
+ max-width: calc(100% - 8px);
+ max-height: calc(100% - 8px);
+ }
+ }
+
+}
diff --git a/src/views/resource/attach.vue b/src/views/resource/attach.vue
index daf35b0..ea05bfb 100644
--- a/src/views/resource/attach.vue
+++ b/src/views/resource/attach.vue
@@ -43,6 +43,7 @@
<el-button type="text"
icon="el-icon-download"
size="small"
+ v-show="!fileFormat(scope.row)"
@click="seeImages(scope.row)">图片预览
</el-button>
</template>
@@ -61,6 +62,15 @@
:upload-after="uploadAfter">
</avue-form>
</el-dialog>
+
+ <el-dialog title="图片预览"
+ append-to-body
+ :visible.sync="imgSee"
+ class="see-img-box">
+ <img :src="imgUrl"
+ alt="">
+ </el-dialog>
+
</basic-container>
</template>
@@ -193,6 +203,8 @@
},
],
},
+ imgSee: false,
+ imgUrl: ""
};
},
computed: {
@@ -334,20 +346,19 @@
},
seeImages (row) {
+ this.imgUrl = "";
+ this.imgUrl = row.link;
+
+ this.imgSee = true;
+ },
+
+ fileFormat (row) {
var index = row.link.lastIndexOf(".");
var ext = row.link.substr(index + 1);
- console.log(ext)
- console.log("该文件是否为图片：" + isAssetTypeAnImage(ext));
-
- function isAssetTypeAnImage (ext) {
- return [
-
- 'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
-
- indexOf(ext.toLowerCase()) == -1;
-
- }
+ return [
+ 'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
+ indexOf(ext.toLowerCase()) == -1;
}
},
};
--
Gitblit v1.9.3