114 lines
2.0 KiB
Vue
114 lines
2.0 KiB
Vue
<script setup>
|
|
import { defineProps, defineEmits } from 'vue'
|
|
|
|
// 组件属性
|
|
const props = defineProps({
|
|
// 视频地址
|
|
videoUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 是否显示
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
// 组件事件
|
|
const emit = defineEmits(['close', 'video-played'])
|
|
|
|
// 处理关闭按钮点击
|
|
const handleClose = () => {
|
|
emit('close')
|
|
}
|
|
|
|
// 处理弹窗背景点击
|
|
const handleModalClick = () => {
|
|
emit('close')
|
|
}
|
|
|
|
// 阻止内容区域冒泡
|
|
const handleContentClick = (e) => {
|
|
e.stopPropagation()
|
|
}
|
|
|
|
// 阻止 iOS 滚动穿透
|
|
const handleTouchMove = (e) => {
|
|
e.preventDefault()
|
|
}
|
|
|
|
// 处理视频播放
|
|
const handleVideoPlay = () => {
|
|
emit('video-played')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="visible" class="video-modal" @touchmove="handleTouchMove">
|
|
<div class="video-modal-content" @click="handleContentClick">
|
|
<video
|
|
:src="videoUrl"
|
|
class="video-player"
|
|
controls
|
|
autoplay
|
|
loop
|
|
@play="handleVideoPlay"
|
|
></video>
|
|
</div>
|
|
<!-- 关闭按钮（放在视频下方） -->
|
|
<div class="video-close-button" @click="handleClose">
|
|
<img src="/static/images/btn_close.png" alt="关闭" class="close-icon" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 视频播放器弹窗样式 */
|
|
.video-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
z-index: 999;
|
|
}
|
|
|
|
.video-modal-content {
|
|
position: relative;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
width: 720rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.video-player {
|
|
width: 720rpx;
|
|
height: 405rpx;
|
|
background-color: #000;
|
|
}
|
|
|
|
.video-close-button {
|
|
margin-top: 30rpx;
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
}
|
|
|
|
.close-icon {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
object-fit: contain;
|
|
}
|
|
</style> |