dma_handbook/docs/.vuepress/components/longPic.vue

<script setup>
import { ref, onMounted, watch } 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)
// 标记图片是否已加载，防止@load重复触发
const isImageLoaded = ref(false)

// 核心：VuePress SSR适配，仅在浏览器端执行图片高度判断
const checkImageHeight = (img) => {
  if (typeof window === 'undefined') return // 服务端直接返回
  const naturalHeight = img.naturalHeight || img.offsetHeight
  console.log(props.alt, naturalHeight, '图片实际高度')
  showExpand.value = naturalHeight > props.maxHeight
  isImageLoaded.value = true
}

// 图片加载完成触发
const handleImageLoad = (event) => {
  if (isImageLoaded.value) return
  checkImageHeight(event.target)
}

// 浏览器端挂载后，主动检查图片（解决@load未触发的边界情况）
onMounted(() => {
  if (typeof window === 'undefined') return
  const img = document.querySelector(`.responsive-image[src="${props.src}"]`)
  if (img && img.complete) { // 图片已缓存完成，主动触发高度判断
    checkImageHeight(img)
  }
})

// 展开/收起切换
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

// 监听展开状态，同步更新提示显示（兜底）
watch(isExpanded, (val) => {
  if (!showExpand.value) return
  showExpand.value = !val
})
</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"
          loading="lazy"
      >
    </div>

    <!-- 展开提示：仅图片高度超限时显示 -->
    <div v-if="showExpand" class="expand-hint" @click="toggleExpand" v-show="!isExpanded">
      <span>点击查看完整图片</span>
    </div>

    <!-- 收起提示：仅展开后显示 -->
    <div class="collapse-hint" @click="toggleExpand" v-show="isExpanded">
      <span>收起图片</span>
    </div>
  </div>
</template>

<style scoped>
.image-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.image-wrapper {
  width: 100%;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  position: relative;
}

/* 渐变遮罩：仅未展开时显示，提示有更多内容 */
.image-wrapper:not(.expanded)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(transparent, rgba(255,255,255,0.95));
  pointer-events: none;
}

.image-wrapper.expanded::after {
  display: none;
}

.responsive-image {
  width: 100%;
  height: auto;
  display: block;
}

.expand-hint, .collapse-hint {
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 0.3s;
}

.expand-hint {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
}

.expand-hint:hover {
  background: rgba(64, 158, 255, 0.2);
}

.collapse-hint {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.collapse-hint:hover {
  background: rgba(103, 194, 58, 0.2);
}
</style>