el-select 展示 22、11、33、44 视频分屏展示

xiaoming_0208

已于 2023-02-01 15:30:11 修改

阅读量197

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-01-18 11:18:43 首次发布

本文链接：https://blog.csdn.net/xiaoming4965/article/details/128724293

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

文章展示了如何使用Vue.js结合ElementUI库创建一个动态分屏的视频展示系统。用户可以通过选择不同的屏幕布局（如2*2，1*1，3*3，4*4），来改变视频的展示方式。代码中使用v-for指令遍历数据，根据选择的布局值动态调整视频格数，并通过变更CSS类实现不同布局风格。

摘要由CSDN通过智能技术生成

html

 //分屏展示
<div class="select">
        <el-select v-model="value" placeholder="2*2" @change="changeSize">
          <i
            slot="prefix"
            class="iconfont icon-a-7Dsifenping"
            style="position: absolute; top: 27%; left: 20%; margin-left: 10px"
          />
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">
              <i
                :class="
                  item.value === 12
                    ? 'iconfont icon-a-7Dsifenping'
                    : item.value === 24
                    ? 'iconfont icon-a-7Ayifenping'
                    : item.value === 8
                    ? 'iconfont icon-a-7Gjiufenping'
                    : 'iconfont icon-a-8Bshiliufenping'
                "
                style="margin-right: 10px"
              ></i>
            </span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.label
            }}</span>
          </el-option>
        </el-select>
      </div>

视频代码展示

//动态判断style样式，
<el-row
          :class="
            type === 12
              ? 'home-stye-2'
              : type === 24
              ? 'home-stye-1'
              : type === 8
              ? 'home-stye-3'
              : 'home-stye-4'
          "
          :gutter="20"
        >
//  element layout布局，定义变量type赋值给:span 
 typeList为展示数据，javascript 中将获取cideoList视频赋值给typeList
          <el-col :span="type" v-for="(item, index) in typeList" :key="index">
            <div class="home-page--content grid-content bg-purple-dark">
              <div class="home-center-title">
                <span class="home-center-span"
                  >场景: {{ item.cameraName }}</span
                >
              </div>
              <!-- :src="baseUrl + item.channelNo + baseSub" -->
              <div class="home-center-bg">

            //视频部分
                <video
                  src="../assets/dack/a0154d8dc6fbcacba844efbf8d489406.mp4"
                  style="width= 100%; height=100%; object-fit: fill"
                  class="video"
                  autoplay  //自动播放
                  controls  //控制按钮放大下载声音等
                ></video>
              </div>
            </div>
          </el-col>
        </el-row>

javascript

data(){

return:{
     // 后端请求数据
      videoList: [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
      ],
      //前端视频展示数据
      typeList: [],
      // 分屏
      options: [
        {
          value: 12,
          label: "2*2",
        },
        {
          value: 24,
          label: "1*1",
        },
        {
          value: 8,
          label: "3*3",
        },
        {
          value: 6,
          label: "4*4",
        },
      ],
      value: "",
      type: 12, //默认2*2

    },

    //初始化2*2
      mounted() {
        this.changeSize(12);

      },
    
     // 分屏  只是从新定义数组arr请求到的数据赋值arr涉及深拷贝 使用slice 返回原数组
    changeSize(value) {
      let arr = this.videoList;
      this.type = value;
      if (value === 12) {
        this.index = 4;
      }
      if (value === 24) {
        this.index = 1;
      }
      if (value === 8) {
        this.index = 9;
      }
      if (value === 6) {
        this.index = 16;
      }
      this.typeList = arr.slice(0, this.index);
    },


}