renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: ui走查问题调整

Browse Source
This commit is contained in:
rd
2025-08-14 17:42:05 +08:00
parent 97f02b1785
commit e173b11750
16 changed files with 150 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/hover-image-preview/index.vue
View File

@ -12,7 +12,7 @@
:disabled="!props.src"
>
<template #content>
<div class="preview-container" :style="containerStyle">
<div class="preview-container">
<img :src="props.src" alt="preview" class="preview-image" />
</div>
</template>
@ -22,9 +22,9 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import type { ImageOrientation } from '@/utils/tools';
import { getImageOrientationByUrl } from '@/utils/tools';
// import { computed, onMounted, ref, watch } from 'vue';
// import type { ImageOrientation } from '@/utils/tools';
// import { getImageOrientationByUrl } from '@/utils/tools';
interface Props {
src: string;
@ -39,30 +39,30 @@ const props = withDefaults(defineProps<Props>(), {
leaveDelay: 200,
});
const orientation = ref<ImageOrientation>('landscape');
// const orientation = ref<ImageOrientation>('landscape');
const resolveOrientation = async () => {
if (!props.src) {
orientation.value = 'landscape';
return;
}
const o = await getImageOrientationByUrl(props.src);
orientation.value = o === 'square' ? 'landscape' : o;
};
// const resolveOrientation = async () => {
// if (!props.src) {
// orientation.value = 'landscape';
// return;
// }
// const o = await getImageOrientationByUrl(props.src);
// orientation.value = o === 'square' ? 'landscape' : o;
// };
onMounted(resolveOrientation);
watch(() => props.src, resolveOrientation);
// onMounted(resolveOrientation);
// watch(() => props.src, resolveOrientation);
const containerStyle = computed(() => {
// 竖图: 306x400；横图: 400x251
const isPortrait = orientation.value === 'portrait';
const width = isPortrait ? 306 : 400;
const height = isPortrait ? 400 : 251;
return {
width: `${width}px`,
height: `${height}px`,
} as Record<string, string>;
});
// const containerStyle = computed(() => {
// // 竖图: 306x400；横图: 400x251
// const isPortrait = orientation.value === 'portrait';
// const width = isPortrait ? 306 : 400;
// const height = isPortrait ? 400 : 251;
// return {
// width: `${width}px`,
// height: `${height}px`,
// } as Record<string, string>;
// });
</script>
<style lang="scss">
@ -85,9 +85,9 @@ const containerStyle = computed(() => {
}
.preview-image {
width: 100%;
height: 100%;
object-fit: contain;
max-width: 368px;
max-height: 368px;
object-fit: scale-down;
}
}
</style>