93 lines
2.0 KiB
Vue
93 lines
2.0 KiB
Vue
|
<template>
|
|||
|
|
<!-- 放大后的遮罩层 -->
|
|||
|
|
<view v-if="isEnlarged" class="image-preview-overlay" @click="handleClose">
|
|||
|
|
<block v-if="getFileType(mediaUrl)=='image'">
|
|||
|
|
<image
|
|||
|
|
:src="mediaUrl"
|
|||
|
|
mode="widthFix"
|
|||
|
|
class="enlarged-image"
|
|||
|
|
/>
|
|||
|
|
</block>
|
|||
|
|
<view :class="videoClass" v-else-if="getFileType(mediaUrl)=='video'">
|
|||
|
|
<!-- object-fit="cover" -->
|
|||
|
|
<video :src="mediaUrl" controls @loadedmetadata="onVideoLoaded"></video>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref,watch } from 'vue';
|
|||
|
|
import {getFileType} from '@/utils/common.js';
|
|||
|
|
const props = defineProps({
|
|||
|
|
visible:{
|
|||
|
|
type:Boolean
|
|||
|
|
},
|
|||
|
|
url:{}//图片路径
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const isEnlarged = ref(props.visible);
|
|||
|
|
const mediaUrl = ref(props.url);//http://192.168.236.184:9000/718ys-test/polling/2483ee76b28b4d43b87c13386dad90bb.jpg
|
|||
|
|
// const mediaType = ref('');//类型
|
|||
|
|
// 显示隐藏
|
|||
|
|
watch(() => props.visible, (newVal, oldVal) => {
|
|||
|
|
isEnlarged.value = newVal
|
|||
|
|
},{
|
|||
|
|
deep:true, // 深度监听
|
|||
|
|
immediate:true // 立即执行
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watch(() => props.url, (newVal, oldVal) => {
|
|||
|
|
mediaUrl.value = newVal;
|
|||
|
|
},{
|
|||
|
|
deep:true,
|
|||
|
|
immediate:true
|
|||
|
|
});
|
|||
|
|
const emit = defineEmits(['close'])
|
|||
|
|
const handleClose=()=>{
|
|||
|
|
emit('close');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取视频的宽和高
|
|||
|
|
let videoClass = ref('enlarged-image');
|
|||
|
|
const onVideoLoaded = (e) => {
|
|||
|
|
// 通过事件对象获取原始宽高[citation:3]
|
|||
|
|
let w = e.detail.width;
|
|||
|
|
let h = e.detail.height;
|
|||
|
|
// 你也可以在这里进行后续操作，比如根据宽高比调整UI
|
|||
|
|
console.log(w,h)
|
|||
|
|
if(h>w){
|
|||
|
|
videoClass.value="enlarged-image"
|
|||
|
|
}else{
|
|||
|
|
videoClass.value="enlarged-image"
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.image-preview-overlay {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 10000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(uni-video){
|
|||
|
|
width:100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.enlarged-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
.enlarged-image2 {
|
|||
|
|
width:auto;
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
</style>
|