Code-Create/src/components/video-model.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import MyEvent from "@/directives/myEvents";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
const isVideoShow = ref(false)
const url = ref('')
const poster = ref('')
const playVideo = (data)=>{
	url.value = data.url || ''
	poster.value = data.poster || ''
	isVideoShow.value = true
}
const closeVideoModel = ()=>{
	url.value = ''
	poster.value = ''
	isVideoShow.value = false
}
onMounted(()=>{
	MyEvent.add("playVideo",playVideo);
})
onUnmounted(()=>{
})
defineExpose({})
</script>
<template>
	<div class="vide-model" v-if="isVideoShow">
		<div class="mask"></div>
		<video :src="url" autoplay controls preload="metadata" controlslist="nodownload" :poster="poster"></video>
		<div class="close-btn">
			<span class="iconfont icon-close" @click="closeVideoModel"></span>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.vide-model{
		z-index: 99999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		> .mask{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			background-color: rgba(0,0,0,.8);
		}
		> video{
			position: absolute;
			top: 50%;
			left: 50%;
			max-height: 80vh;
			max-width: 80vw;
			transform: translate(-50%,-50%);
		}
		> .close-btn{
			position: absolute;
			top: 20px;
			right: 20px;
			font-size: 30px;
			color: #fff;
			cursor: pointer;
			span{
				font-size: 30px;
			}
		}
	}
</style>