添加全局视频

src/components/video-model.vue

@@ -0,0 +1,74 @@
+<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(true)
+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>