112 lines
2.0 KiB
Vue
112 lines
2.0 KiB
Vue
<template>
|
|
<div v-show="modalShow" class="general_video">
|
|
<div class="video_box">
|
|
<div class="general_video_btn" @click="clearVideo">
|
|
<i class="fi fi-rr-cross-small"></i>
|
|
</div>
|
|
<video ref="video" controls>
|
|
<source :src="url" type="video/webm">
|
|
Your browser does not support the video tag or the file format of this video.
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, h, ref ,toRefs,computed,reactive, watch} from "vue";
|
|
export default defineComponent({
|
|
props:{
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
remove: {
|
|
type: Function, //传入移除节点方法,这里是createApp中的方法
|
|
default: null,
|
|
},
|
|
url: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
|
|
|
|
setup(props:any,{emit}) {
|
|
const modalShow = ref(false);
|
|
modalShow.value = props.visible;
|
|
let clearVideo = ()=>{
|
|
modalShow.value = false
|
|
}
|
|
let video = ref(null)
|
|
watch(() => modalShow.value,
|
|
(newVal,oldVal)=>{
|
|
!newVal && props.remove()
|
|
}
|
|
)
|
|
return {
|
|
modalShow,
|
|
clearVideo,
|
|
video,
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
// moodTemplateId: "", //模板id
|
|
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.general_video {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,.5);
|
|
z-index: 9999;
|
|
top: 0;
|
|
left: 0;
|
|
.video_box{
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 80%;
|
|
height: auto;
|
|
max-height: 80vh;
|
|
position: absolute;
|
|
video{
|
|
width: 100%;
|
|
max-height: 80vh;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
.general_video_btn{
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
background: #000;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
right: 0;
|
|
top: 0;
|
|
transform: translate(50%,-50%);
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
i{
|
|
font-size: 4rem;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |