105 lines
1.8 KiB
Vue
105 lines
1.8 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'])
|
||
|
||
// 处理关闭按钮点击
|
||
const handleClose = () => {
|
||
emit('close')
|
||
}
|
||
|
||
// 处理弹窗背景点击
|
||
const handleModalClick = () => {
|
||
emit('close')
|
||
}
|
||
|
||
// 阻止内容区域冒泡
|
||
const handleContentClick = (e) => {
|
||
e.stopPropagation()
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div v-if="visible" class="video-modal">
|
||
<div class="video-modal-content" @click="handleContentClick">
|
||
<div class="video-close-button" @click="handleClose">
|
||
<span>×</span>
|
||
</div>
|
||
<video
|
||
:src="videoUrl"
|
||
class="video-player"
|
||
controls
|
||
autoplay
|
||
loop
|
||
></video>
|
||
</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;
|
||
z-index: 999;
|
||
}
|
||
|
||
.video-modal-content {
|
||
position: relative;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
width: 720rpx;
|
||
height: 405rpx;
|
||
}
|
||
|
||
.video-close-button {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
right: 10rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
z-index: 10;
|
||
}
|
||
|
||
.video-close-button span {
|
||
color: white;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
line-height: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.video-player {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #000;
|
||
}
|
||
</style> |