125 lines
2.3 KiB
Vue
125 lines
2.3 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
src: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
alt: {
|
|
type: String,
|
|
default: '图片'
|
|
},
|
|
maxHeight: {
|
|
type: Number,
|
|
default: 500
|
|
}
|
|
})
|
|
|
|
const isExpanded = ref(false)
|
|
const showExpand = ref(false)
|
|
|
|
const handleImageLoad = (event) => {
|
|
const img = event.target
|
|
console.log(props.alt,img.naturalHeight,'img.naturalHeight')
|
|
showExpand.value = img.naturalHeight > props.maxHeight
|
|
console.log(showExpand.value,'showExpand.value')
|
|
}
|
|
|
|
const toggleExpand = () => {
|
|
isExpanded.value = !isExpanded.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="image-container">
|
|
<div
|
|
class="image-wrapper"
|
|
:class="{ 'expanded': isExpanded }"
|
|
:style="{ maxHeight: !isExpanded ? `${maxHeight}px` : 'none' }"
|
|
>
|
|
<img
|
|
:src="src"
|
|
:alt="alt"
|
|
@load="handleImageLoad"
|
|
class="responsive-image"
|
|
>
|
|
</div>
|
|
|
|
<div v-if="showExpand && !isExpanded" class="expand-hint" @click="toggleExpand">
|
|
<span>点击查看完整图片</span>
|
|
</div>
|
|
|
|
<div v-if="isExpanded" class="collapse-hint" @click="toggleExpand">
|
|
<span>收起图片</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.image-container {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.image-wrapper {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.image-wrapper::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60px;
|
|
//background: linear-gradient(transparent, rgba(255,255,255,0.9));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.image-wrapper.expanded::after {
|
|
display: none;
|
|
}
|
|
|
|
.responsive-image {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.expand-hint {
|
|
text-align: center;
|
|
padding: 8px;
|
|
background: rgba(64, 158, 255, 0.1);
|
|
color: #409eff;
|
|
cursor: pointer;
|
|
margin-top: 8px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.expand-hint:hover {
|
|
background: rgba(64, 158, 255, 0.2);
|
|
}
|
|
|
|
.collapse-hint {
|
|
text-align: center;
|
|
padding: 8px;
|
|
background: rgba(103, 194, 58, 0.1);
|
|
color: #67c23a;
|
|
cursor: pointer;
|
|
margin-top: 8px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.collapse-hint:hover {
|
|
background: rgba(103, 194, 58, 0.2);
|
|
}
|
|
</style>
|