123 lines
2.9 KiB
Vue
123 lines
2.9 KiB
Vue
<template>
|
||
<!-- 放大后的遮罩层 -->
|
||
<view v-if="isEnlarged" class="image-preview-overlay">
|
||
<view class="image-preview-close" @click="handleClose">
|
||
<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
|
||
</view>
|
||
<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> -->
|
||
<!--
|
||
src: '' // 视频地址
|
||
autoplay: false // 是否自动播放
|
||
loop: false // 是否循环播放
|
||
controls: false // 是否显示控制栏
|
||
muted: false // 是否静音
|
||
isLoading: false // Android系统加载时显示loading(为了遮挡安卓的黑色按钮)
|
||
objectFit: 'contain' // 视频尺寸与video区域的适应模式
|
||
poster: '' // 视频封面
|
||
-->
|
||
<DomVideoPlayer :src="mediaUrl" controls autoplay />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import DomVideoPlayer from 'uniapp-video-player'
|
||
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);
|
||
// 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;
|
||
}
|
||
.image-preview-overlay .image-preview-close{
|
||
position: absolute;
|
||
width:50rpx;
|
||
height:50rpx;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
right:20rpx;
|
||
top:20rpx;
|
||
/* #ifdef APP-PLUS */
|
||
top:44rpx;
|
||
/* #endif */
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 1;
|
||
}
|
||
|
||
:deep(uni-video){
|
||
width:100%;
|
||
}
|
||
|
||
.enlarged-image {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
.enlarged-image2 {
|
||
width:auto;
|
||
height: 100vh;
|
||
}
|
||
</style> |