分屏代码 vue html

<template>
   <div style="overflow: hidden;">

     <el-row type="flex" :gutter="10" justify="center" v-show="!fullscreen">
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="16"><div class="grid-content bg-purple"> 
        <el-button-group>
        <el-button :type="classtype1"  @click="selecttype('classtype1',1,24)">单屏</el-button>
        <el-button :type="classtype2"  @click="selecttype('classtype2',4,12)">四分屏</el-button>
        <el-button :type="classtype3"  @click="selecttype('classtype3',9,8)">九分屏</el-button>
        <el-button :type="classtype4"  @click="selecttype('classtype4',16,6)">十六分屏</el-button>
        <el-button > 
           <div class="btn-fullscreen" @click="handleFullScreen">
                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                        <i class="el-icon-rank"></i>
                    </el-tooltip>
          </div>
        </el-button>
        </el-button-group>
        </div>
      </el-col>
      <el-col :span="4">&nbsp;</el-col>
    </el-row>
       

    <div class="main">
      <div class="conter">
      <el-row  :gutter="10" >
          <el-col  v-for="(n,index) in fornum" :xs="24" :sm="24" :md="clonum" :lg="clonum" :xl="clonum"  :class="videoclass" :key="index" >
            <div  class="player-wrapper" element-loading-text="加载中..." element-loading-background="#000">
              <div class="video-wrapper" :style="videoclass" :id="`videoid${n}`">
                <div class="video-inner live hide-waiting" style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;">
                  <div class="alt">
                    <div class="talbetop">
                      <table>
                        <tr>
                          <td>无信号</td>
                        </tr>
                      </table>
                      <div v-show="true" class="selectchannel"  @click="dialogFormVisible=true"> 选择通道</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
      </el-row>
      </div>
       <div class="footer"></div>
    </div>


  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        这是测试
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary