覆盖elementui样式

前台以表格形式展示后台数据，图片或视频点击后弹出框播放，用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>