效果图:
因为封装的时候主要是为了让代码更简洁 没想复用这一块 所以使用起来不是很灵活 可以参考一下
具体如下:
父组件:
给点击弹出视频的元素添加一个点击事件把视频的url地址传过来 我这里添加的是move
src属性是视频的播放地址
//父组件
<artVidao :src="scopes" ref="vidao" />
//使用$refs使用子组件里的方法弹出视频checkVideoFun()
move (row) {
this.scopes = row
this.$refs.vidao.checkVideoFun()
}
视频组件:
<template>
<div>
<!-- //外层的遮罩 -->
<div class="mask" v-if="videoState"> </div>
<!-- //弹窗 -->
<div class="videomasks" v-if="videoState">
<!-- //关闭的按钮 点击触发关闭的方法-->
<div class="box" @click="masksCloseFun">
//饿了么的字体图片
<i class="el-icon-close icn"></i>
</div>
//视频播放器
<video
:src="videoSrc"
:controls="true"
autoplay
preload="preload"
></video>
</div>
</div>
</template>
<script>
export default {
props: {
src: { type: String }
},
data () {
return {
//视频地址
videoSrc: '',
// 控制弹窗和遮罩层的数据项
videoState: false
}
},
methods: {
//弹出播放器播放视频的方法
checkVideoFun () {
this.$nextTick(() => {
// 弹出视频播放器和遮罩层
this.videoState = true
//把传过来的src传过来
this.videoSrc = this.src
})
},
//点击关闭
masksCloseFun () {
//清空视频地址
this.videoSrc = ''
//关闭弹窗和遮罩层
this.videoState = false
}
}
}
</script>
<style scoped>
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1002;
background-color: #000000;
opacity: 0.6;
}
/* 内容层 z-index要比遮罩大,否则会被遮盖 */
.move {
color: #00f;
font-size: 18px;
vertical-align: middle;
margin-left: 10px;
}
.videomasks {
max-width: 1200px;
position: fixed;
left: 50%;
top: 55%;
z-index: 1200;
transform: translate(-50%, -50%);
}
.videomasks video {
z-index: 20;
width: 800px;
height: 600px;
}
.box {
position: relative;
position: absolute;
top: -15%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.4);
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0 0 5px rgb(0 0 0 / 60%);
transition: all 0.2s ease-in;
}
.box:hover .icn {
color: #fff;
}
.box:hover {
box-shadow: 0 0 10px rgb(255 255 255 / 60%);
}
.icn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: rgb(175, 174, 174);
transition: all 0.2s ease-in;
}
</style>
基本上就这些了 需要的可以参考一下 拿过去用 再改的话也太麻烦了