SplitVideoView.vue

<template>
    <div class="video">
      <div style="height: 5%;padding: 6px;">
        <el-dropdown @command="handleCommand" trigger="click">
          <span class="el-dropdown-link">
            <img src="@/assets/images/spilt.png" alt="spilt" style="width: 18px;height: 18px">
            分屏设置
          </span>
          <el-dropdown-menu slot="dropdown" style="width:100px">
            <el-dropdown-item command="1">1x1 </el-dropdown-item>
            <el-dropdown-item command="4">2x2</el-dropdown-item>
            <el-dropdown-item command="9">3x3</el-dropdown-item>
            <el-dropdown-item command="16">4x4</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div style="height: 95%;width: 100%;" ref="playVideo">
        <div v-for="num in spiltNum" class="videoShow" :style="{'width': countWidth,'height':countHeight}" @click="changeVideo('play'+num,num)">
          <PlayVideo
            :playId="'play'+num"
            :isChoice="showVideoNum == num"
            :ref="'play'+num"
          >
          </PlayVideo>

        </div>
      </div>

    </div>
</template>

<script>
  import PlayVideo from "@/components/Video/PlayVideo"
    export default {
      name: "split-videoview",
      components:{
        PlayVideo
      },
      data(){
        return{
          spiltNum: 0,
          showVideoNum: 1,
          playId: "play1",
        }
      },
      mounted(){
        this.spiltNum = 4;
      },
      watch: {
        spiltNum(newVal, oldVal) {
          this.$nextTick(() => {
              /*现在数据已经渲染完毕*/
              for (var i = 1; i <= this.spiltNum; i++) {
              const playId = "play" + i;
              this.$refs[playId][0].fit();
            }
          });
        },
      },
      computed:{
        countWidth(){
          return (this.$refs.playVideo.offsetWidth-2)/Math.sqrt(this.spiltNum) + 'px';
        },
        countHeight(){
          return (this.$refs.playVideo.offsetHeight-2)/Math.sqrt(this.spiltNum) + 'px';
        }
      },
      methods:{
        changeVideo(playId,num){
          this.playId = playId;
          this.showVideoNum = num;
        },
        handleCommand(val){
          this.spiltNum = eval(val);
          this.playId = "play1";
          this.showVideoNum = 1;
        },
        playVideo(video){
          this.$refs[this.playId][0].playVideo(video);
        }
      }
    }
</script>

<style scoped lang="scss">
  .videoShow{
    float: left;
    padding: 6px;
  }
  .video{
    height: 100%;
    width: 100%;
    margin-left: 6px;
    float: left;
    background: #fff;
  }

</style>