前台以表格形式展示后台数据，图片或视频点击后弹出框播放，用el-dialog实现。
希望播放视频的时候不显示dialog的背景那些。
尝试 scoped 无果
<style lang="scss" scoped>
.el-dialog {
position: relative;
margin: 0 auto ;
width: 50%;
height: 90vh;
background: none;
border: none;
border-radius: 0px;
box-shadow: none;
.el-dialog__header{
display: none;
}
.el-dialog__body{
width: 100%;
height: 100%;
.video-container{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.video-item {
max-width: 100%;
max-height: 100%;
}
}
}
}
</style>
不加 scoped 则会覆盖 elementui 样式，很是烦恼
解决方法：
在外层加入自定义class，以命名空间隔离
<template>
<div class="dialog-video-wrapper">
<el-dialog :visible.sync="visible"
:before-close="handleDialogVideoClose"
:top="0"
:modal="true"
@close="$emit('update:show', false)"
>
<div class="video-container">
<video ref="videoBox" class="video-item" :src="videoUrl" autoplay controls>
</video>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'DialogVideoPlay',
props: {
// 是否可见
show: {
type: Boolean,
default: false,
},
// 传入的视频地址
videoUrl: {
type: String,
required: true,
}
},
watch: {
show(){
this.visible = this.show
}
},
data(){
return {
visible: this.show,
}
},
methods: {
// 视频框关闭前暂停播放
handleDialogVideoClose(done){
this.$refs.videoBox.pause()
done()
},
}
}
</script>
<style lang="scss">
.dialog-video-wrapper{
.el-dialog {
position: relative;
margin: 0 auto ;
width: 50%;
height: 90vh;
background: none;
border: none;
border-radius: 0px;
box-shadow: none;
.el-dialog__header{
display: none;
}
.el-dialog__body{
width: 100%!important;
height: 100%!important;
.video-container{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.video-item {
max-width: 100%;
max-height: 100%;
}
}
}
}
}
</style>