318 lines
8.7 KiB
Vue
318 lines
8.7 KiB
Vue
<template>
|
||
<view
|
||
v-if="dataVisible"
|
||
:id="classPrefix"
|
||
:class="classPrefix + ' ' + tClass"
|
||
:style="tools._style([customStyle, '--td-image-viewer-top: ' + distanceTop + 'px'])"
|
||
:aria-modal="true"
|
||
aria-role="dialog"
|
||
aria-label="图片查看器"
|
||
@touchmove.stop.prevent="true"
|
||
>
|
||
<view
|
||
:class="classPrefix + '__mask'"
|
||
data-source="overlay"
|
||
:style="tools._style([backgroundColor && '--td-image-viewer-mask-bg-color: ' + backgroundColor])"
|
||
aria-role="button"
|
||
aria-label="关闭"
|
||
@click="(e) => onClose(e, 'overlay')"
|
||
/>
|
||
<block v-if="images && images.length">
|
||
<view :class="classPrefix + '__content'">
|
||
<swiper
|
||
class="swiper"
|
||
:style="swiperStyle[currentSwiperIndex] && swiperStyle[currentSwiperIndex].style"
|
||
:autoplay="false"
|
||
:current="currentSwiperIndex"
|
||
tabindex="0"
|
||
@change="onSwiperChange"
|
||
@click="(e) => onClose(e, '')"
|
||
>
|
||
<swiper-item
|
||
v-for="(item, index) in images"
|
||
:key="index"
|
||
:class="classPrefix + '__preview-image'"
|
||
>
|
||
<t-image
|
||
v-if="!lazy || shouldLoadImage(index, currentSwiperIndex, loadedImageIndexes)"
|
||
:t-class="prefix + '-image--external'"
|
||
:class="classPrefix + '__image'"
|
||
:custom-style="(imagesStyle[index] && imagesStyle[index].style) || ''"
|
||
:data-index="index"
|
||
:src="item"
|
||
:mode="(imageProps && imageProps.mode) || 'aspectFit'"
|
||
:lazy="(imageProps && imageProps.lazy) || false"
|
||
:loading="(imageProps && imageProps.loading) || 'default'"
|
||
:shape="(imageProps && imageProps.shape) || 'square'"
|
||
:webp="(imageProps && imageProps.webp) || false"
|
||
:show-menu-by-longpress="(imageProps && imageProps.showMenuByLongpress) || false"
|
||
@load="onImageLoadSuccess($event, { index })"
|
||
/>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view
|
||
:class="classPrefix + '__nav'"
|
||
>
|
||
<view
|
||
:class="classPrefix + '__nav-close'"
|
||
aria-role="button"
|
||
aria-label="关闭"
|
||
@click.stop.prevent="(e) => onClose(e, '')"
|
||
>
|
||
<slot name="close-btn" />
|
||
<block
|
||
v-if="_closeBtn"
|
||
name="icon"
|
||
>
|
||
<t-icon
|
||
:custom-style="_closeBtn.style || ''"
|
||
:t-class="_closeBtn.tClass"
|
||
:prefix="_closeBtn.prefix"
|
||
:name="_closeBtn.name"
|
||
:size="_closeBtn.size"
|
||
:color="_closeBtn.color"
|
||
:aria-hidden="!!_closeBtn.ariaHidden"
|
||
:aria-label="_closeBtn.ariaLabel"
|
||
:aria-role="_closeBtn.ariaRole"
|
||
@click="_closeBtn.click || ''"
|
||
/>
|
||
</block>
|
||
</view>
|
||
<view
|
||
v-if="showIndex"
|
||
:class="classPrefix + '__nav-index'"
|
||
>
|
||
{{ currentSwiperIndex + 1 }}/{{ images.length }}
|
||
</view>
|
||
<view
|
||
:class="classPrefix + '__nav-delete'"
|
||
aria-role="button"
|
||
aria-label="删除"
|
||
@click="onDelete"
|
||
>
|
||
<slot name="delete-btn" />
|
||
<t-icon
|
||
v-if="_deleteBtn"
|
||
:custom-style="_deleteBtn.style || ''"
|
||
:t-class="_deleteBtn.tClass"
|
||
:prefix="_deleteBtn.prefix"
|
||
:name="_deleteBtn.name"
|
||
:size="_deleteBtn.size"
|
||
:color="_deleteBtn.color"
|
||
:aria-hidden="!!_deleteBtn.ariaHidden"
|
||
:aria-label="_deleteBtn.ariaLabel"
|
||
:aria-role="_deleteBtn.ariaRole"
|
||
@click="_deleteBtn.click || ''"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import TImage from '../image/image';
|
||
import TIcon from '../icon/icon';
|
||
import { uniComponent } from '../common/src/index';
|
||
import { styles, calcIcon, systemInfo } from '../common/utils';
|
||
import { prefix } from '../common/config';
|
||
import props from './props';
|
||
import tools from '../common/utils.wxs';
|
||
import { shouldLoadImage } from './computed.js';
|
||
import useCustomNavbar from '../mixins/using-custom-navbar';
|
||
|
||
|
||
const name = `${prefix}-image-viewer`;
|
||
|
||
export default uniComponent({
|
||
name,
|
||
options: {
|
||
styleIsolation: 'shared',
|
||
},
|
||
controlledProps: [
|
||
{
|
||
key: 'visible',
|
||
event: 'close',
|
||
},
|
||
],
|
||
externalClasses: [`${prefix}-class`],
|
||
mixins: [useCustomNavbar],
|
||
components: {
|
||
TImage,
|
||
TIcon,
|
||
},
|
||
props: {
|
||
...props,
|
||
},
|
||
data() {
|
||
return {
|
||
prefix,
|
||
classPrefix: name,
|
||
currentSwiperIndex: 0,
|
||
loadedImageIndexes: [],
|
||
windowHeight: 0,
|
||
windowWidth: 0,
|
||
swiperStyle: {},
|
||
imagesStyle: {},
|
||
maskTop: 0,
|
||
tools,
|
||
|
||
_deleteBtn: null,
|
||
_closeBtn: null,
|
||
dataVisible: this.visible,
|
||
};
|
||
},
|
||
watch: {
|
||
visible: {
|
||
handler(v) {
|
||
this.dataVisible = v;
|
||
this.init();
|
||
},
|
||
},
|
||
initialIndex: 'init',
|
||
images: 'init',
|
||
|
||
closeBtn: {
|
||
handler(v) {
|
||
this._closeBtn = calcIcon(v, 'close');
|
||
},
|
||
immediate: true,
|
||
},
|
||
|
||
deleteBtn: {
|
||
handler(v) {
|
||
this._deleteBtn = calcIcon(v, 'delete');
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
created() {
|
||
this.saveScreenSize();
|
||
// this.calcMaskTop();
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
methods: {
|
||
shouldLoadImage,
|
||
init() {
|
||
const { visible: dataVisible, images, initialIndex } = this;
|
||
if (dataVisible && images?.length) {
|
||
this.loadedImageIndexes = [];
|
||
this.currentSwiperIndex = initialIndex >= images.length ? images.length - 1 : initialIndex;
|
||
}
|
||
},
|
||
calcMaskTop() {
|
||
if (this.usingCustomNavbar) {
|
||
const rect = wx?.getMenuButtonBoundingClientRect() || null;
|
||
const { statusBarHeight } = systemInfo;
|
||
|
||
if (rect && statusBarHeight) {
|
||
this.maskTop = rect.top - statusBarHeight + rect.bottom;
|
||
}
|
||
}
|
||
},
|
||
saveScreenSize() {
|
||
const { windowHeight, windowWidth } = systemInfo;
|
||
this.windowHeight = windowHeight;
|
||
this.windowWidth = windowWidth;
|
||
},
|
||
|
||
calcImageDisplayStyle(imageWidth, imageHeight) {
|
||
const { windowWidth, windowHeight } = this;
|
||
const ratio = imageWidth / imageHeight;
|
||
// 图片宽高都小于屏幕宽高
|
||
if (imageWidth < windowWidth && imageHeight < windowHeight) {
|
||
return {
|
||
styleObj: {
|
||
width: `${imageWidth}px`,
|
||
height: `${imageHeight}px`,
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
},
|
||
};
|
||
}
|
||
// 图片宽高至少存在一个大于屏幕宽高，此时判断图片宽高比，按长边显示
|
||
if (ratio >= 1) {
|
||
return {
|
||
styleObj: {
|
||
width: '100vw',
|
||
height: `${(windowWidth / ratio)}px`,
|
||
},
|
||
};
|
||
}
|
||
|
||
// 图片的高大于宽（纵向图），设定高度为100vh，宽度自适应，且确保宽度不超过屏幕宽度
|
||
const scaledHeight = ratio * windowHeight * 2;
|
||
if (scaledHeight < windowWidth) {
|
||
return {
|
||
styleObj: {
|
||
width: `${scaledHeight}rpx`,
|
||
height: '100vh',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
},
|
||
};
|
||
}
|
||
// 当通过高度计算的图片宽度超过屏幕宽度时, 以屏幕宽度为基准, 重新计算高度
|
||
return {
|
||
styleObj: {
|
||
width: '100vw',
|
||
height: `${(windowWidth / imageWidth) * imageHeight}px`,
|
||
},
|
||
};
|
||
},
|
||
|
||
onImageLoadSuccess({ e }, { index }) {
|
||
const {
|
||
detail: { width, height },
|
||
} = e;
|
||
|
||
const { mode, styleObj } = this.calcImageDisplayStyle(width, height);
|
||
const originImagesStyle = this.imagesStyle;
|
||
const originSwiperStyle = this.swiperStyle;
|
||
|
||
if (!this.loadedImageIndexes.includes(index)) {
|
||
this.loadedImageIndexes = [...this.loadedImageIndexes, index];
|
||
}
|
||
|
||
|
||
this.swiperStyle = {
|
||
...originSwiperStyle,
|
||
[index]: {
|
||
style: `height: ${styleObj.height}`,
|
||
},
|
||
};
|
||
this.imagesStyle = {
|
||
...originImagesStyle,
|
||
[index]: {
|
||
mode,
|
||
style: styles({ ...styleObj }),
|
||
},
|
||
};
|
||
},
|
||
|
||
onSwiperChange(e) {
|
||
const {
|
||
detail: { current },
|
||
} = e;
|
||
this.currentSwiperIndex = current;
|
||
|
||
this._trigger('change', { index: current });
|
||
},
|
||
|
||
onClose(e, source) {
|
||
this._trigger('close', { visible: false, trigger: source || 'button', index: this.currentSwiperIndex });
|
||
},
|
||
|
||
onDelete() {
|
||
this._trigger('delete', { index: this.currentSwiperIndex });
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
<style scoped>
|
||
@import './image-viewer.css';
|
||
|
||
</style>
|