74 lines
1.5 KiB
Vue
74 lines
1.5 KiB
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(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>
|