From 9860e221460a0a4ac1903dad2c97160d0eed0e63 Mon Sep 17 00:00:00 2001
From: long <515897141@qq.com>
Date: 星期五, 03 三月 2023 10:59:42 +0800
Subject: [PATCH] 初始化
---
src/components/ChatList/msg/imagePop.vue | 101 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 101 insertions(+), 0 deletions(-)
diff --git a/src/components/ChatList/msg/imagePop.vue b/src/components/ChatList/msg/imagePop.vue
new file mode 100644
index 0000000..7eae770
--- /dev/null
+++ b/src/components/ChatList/msg/imagePop.vue
@@ -0,0 +1,101 @@
+<template>
+ <div class="pop-box">
+ <!-- 宸插姞杞� -->
+ <div v-if="data.fileUrl">
+ <el-image :src="data.fileUrl" class="img" fit="contain" :preview-src-list="[data.fileUrl]" />
+ </div>
+ <!-- 鍔犺浇澶辫触 -->
+ <div v-else class="com_chat_notx">[鍥剧墖]</div>
+ <!-- <div v-else class="no-box" @click="tapNoReal">
+ <i class="el-icon-picture img-icon" />
+ <div class="download-btn" :class="{'show':loading}">
+ <i :class="loading?'el-icon-loading':'el-icon-download'" />
+ </div>
+ </div> -->
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'ImagePop',
+ props: {
+ // 鏁版嵁
+ data: {
+ type: Object,
+ default: null
+ },
+ // 鏂瑰悜
+ direction: {
+ type: String,
+ default: ''
+ }
+ },
+ data() {
+ return {
+ loading: false
+ }
+ },
+ // watch: {
+ // data(value) {
+ // if (value && value.fileUrl) this.loading = false
+ // }
+ // },
+ mounted() {
+ },
+ methods: {
+ // 鐐瑰嚮鑾峰彇鐪熷疄鏁版嵁
+ tapNoReal() {
+ if (this.loading) return
+ this.loading = true
+ this.$emit('tapNoReal')
+ }
+ }
+}
+</script>
+
+<style scoped>
+.pop-box .img {
+ width: 150px;
+ min-height: 150px;
+ border-radius: 4px;
+ display: block;
+}
+
+.pop-box .no-box {
+ position: relative;
+ width: 60px;
+ height: 60px;
+ cursor: pointer;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.pop-box .no-box .img-icon {
+ font-size: 60px;
+ text-align: center;
+}
+
+.pop-box .no-box:hover .download-btn {
+ opacity: 1;
+ transition: opacity .2s;
+}
+
+.pop-box .no-box .download-btn.show {
+ opacity: 1;
+}
+
+.pop-box .no-box .download-btn {
+ opacity: 0;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ text-align: center;
+ font-size: 30px;
+ line-height: 60px;
+ color: #fff;
+ background: rgba(0, 0, 0, 0.5);
+}
+
+</style>
--
Gitblit v1.8.0