102 lines
1.9 KiB
Vue
102 lines
1.9 KiB
Vue
<script setup>
|
||
import { ref, onMounted, computed } from 'vue'
|
||
|
||
const props = defineProps({
|
||
src: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
alt: {
|
||
type: String,
|
||
default: '长图'
|
||
},
|
||
sliceHeight: {
|
||
type: Number,
|
||
default: 600
|
||
}
|
||
})
|
||
|
||
const imgLoaded = ref(false)
|
||
const naturalWidth = ref(0)
|
||
const naturalHeight = ref(0)
|
||
const containerWidth = ref(0)
|
||
|
||
const handleLoad = (e) => {
|
||
imgLoaded.value = true
|
||
naturalWidth.value = e.target.naturalWidth
|
||
naturalHeight.value = e.target.naturalHeight
|
||
}
|
||
|
||
const handleContainerResize = (el) => {
|
||
containerWidth.value = el.getBoundingClientRect().width
|
||
}
|
||
|
||
const slices = computed(() => {
|
||
if (!imgLoaded.value) return []
|
||
const count = Math.ceil(naturalHeight.value / props.sliceHeight)
|
||
const arr = []
|
||
for (let i = 0; i < count; i++) {
|
||
arr.push({
|
||
top: i * props.sliceHeight,
|
||
height: Math.min(props.sliceHeight, naturalHeight.value - i * props.sliceHeight)
|
||
})
|
||
}
|
||
return arr
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
class="long-pic-img-split"
|
||
@resize="handleContainerResize($event.target)"
|
||
>
|
||
<!-- 用于获取尺寸 -->
|
||
<img
|
||
:src="src"
|
||
:alt="alt"
|
||
@load="handleLoad"
|
||
class="img-hidden"
|
||
>
|
||
|
||
<!-- 正常分段显示，宽度100%，不会被放大 -->
|
||
<img
|
||
v-for="(item, idx) in slices"
|
||
:key="idx"
|
||
:src="src"
|
||
:alt="`${alt}-${idx + 1}`"
|
||
class="split-img"
|
||
:style="{
|
||
height: `${item.height}px`,
|
||
objectPosition: `center ${-item.top}px`,
|
||
}"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.long-pic-img-split {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.img-hidden {
|
||
position: absolute;
|
||
width: 100%;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.split-img {
|
||
display: block;
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
object-fit: cover;
|
||
object-position: top center;
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
</style>
|