提交 | 用户 | age
|
36e1de
|
1 |
<template> |
L |
2 |
<div class="pop-box"> |
|
3 |
<!-- 已加载 --> |
|
4 |
<div v-if="data.fileUrl"> |
|
5 |
<el-image :src="data.fileUrl" class="img" fit="contain" :preview-src-list="[data.fileUrl]" /> |
|
6 |
</div> |
|
7 |
<!-- 加载失败 --> |
|
8 |
<div v-else class="com_chat_notx">[图片]</div> |
|
9 |
<!-- <div v-else class="no-box" @click="tapNoReal"> |
|
10 |
<i class="el-icon-picture img-icon" /> |
|
11 |
<div class="download-btn" :class="{'show':loading}"> |
|
12 |
<i :class="loading?'el-icon-loading':'el-icon-download'" /> |
|
13 |
</div> |
|
14 |
</div> --> |
|
15 |
</div> |
|
16 |
</template> |
|
17 |
|
|
18 |
<script> |
|
19 |
export default { |
|
20 |
name: 'ImagePop', |
|
21 |
props: { |
|
22 |
// 数据 |
|
23 |
data: { |
|
24 |
type: Object, |
|
25 |
default: null |
|
26 |
}, |
|
27 |
// 方向 |
|
28 |
direction: { |
|
29 |
type: String, |
|
30 |
default: '' |
|
31 |
} |
|
32 |
}, |
|
33 |
data() { |
|
34 |
return { |
|
35 |
loading: false |
|
36 |
} |
|
37 |
}, |
|
38 |
// watch: { |
|
39 |
// data(value) { |
|
40 |
// if (value && value.fileUrl) this.loading = false |
|
41 |
// } |
|
42 |
// }, |
|
43 |
mounted() { |
|
44 |
}, |
|
45 |
methods: { |
|
46 |
// 点击获取真实数据 |
|
47 |
tapNoReal() { |
|
48 |
if (this.loading) return |
|
49 |
this.loading = true |
|
50 |
this.$emit('tapNoReal') |
|
51 |
} |
|
52 |
} |
|
53 |
} |
|
54 |
</script> |
|
55 |
|
|
56 |
<style scoped> |
|
57 |
.pop-box .img { |
|
58 |
width: 150px; |
|
59 |
min-height: 150px; |
|
60 |
border-radius: 4px; |
|
61 |
display: block; |
|
62 |
} |
|
63 |
|
|
64 |
.pop-box .no-box { |
|
65 |
position: relative; |
|
66 |
width: 60px; |
|
67 |
height: 60px; |
|
68 |
cursor: pointer; |
|
69 |
border-radius: 4px; |
|
70 |
overflow: hidden; |
|
71 |
} |
|
72 |
|
|
73 |
.pop-box .no-box .img-icon { |
|
74 |
font-size: 60px; |
|
75 |
text-align: center; |
|
76 |
} |
|
77 |
|
|
78 |
.pop-box .no-box:hover .download-btn { |
|
79 |
opacity: 1; |
|
80 |
transition: opacity .2s; |
|
81 |
} |
|
82 |
|
|
83 |
.pop-box .no-box .download-btn.show { |
|
84 |
opacity: 1; |
|
85 |
} |
|
86 |
|
|
87 |
.pop-box .no-box .download-btn { |
|
88 |
opacity: 0; |
|
89 |
position: absolute; |
|
90 |
left: 0; |
|
91 |
right: 0; |
|
92 |
top: 0; |
|
93 |
bottom: 0; |
|
94 |
text-align: center; |
|
95 |
font-size: 30px; |
|
96 |
line-height: 60px; |
|
97 |
color: #fff; |
|
98 |
background: rgba(0, 0, 0, 0.5); |
|
99 |
} |
|
100 |
|
|
101 |
</style> |