vue 1 2 3 4 6 9 16宫格 6宫格（六宫格） 9宫格（九宫格） 16宫格（十六宫格） 自定义宫格(样式篇)

直接上图把，如果是你的菜，就点个赞，谢谢。

目录：

我直接在app.vue组件写了.。

<template>
  <div class="cell">
        <div class="cell-tool">
            <div class="bk-button-group">
                <button @click="cellCountFn(item.number)" v-for="(item,index) in iconArr" :key="index">{{item.number}}</button>
            </div>
        </div>
        <div class="player">
            <div :class="cellClass(index2)" v-for="(i,index2) in cellCountArr" :key="index2">
                <playVideo :str1="index2+1" ></playVideo>
            </div>
        </div>
    </div>
</template>

<script>
import playVideo from './components/playVideo.vue'

export default {
  name: 'App',
  components: {
    playVideo
  },
  data() {
      return {
        cellCount:4,  //默认从4开始
        cellCountArr: [
          {
            index:1,
            data:null,
            isShow:false
          },
          {
            index:2,
            data:null,
            isShow:false
          },
          {
            index:3,
            data:null,
            isShow:false
          },
          {
            index:4,
            data:null,
            isShow:false
          },
        ],
        iconArr:[             //1 2 3 4 6 9 16宫格 icon 样式
          {
            number:1,   //必须是int（number） 类型 
            name:'el-icon-s-platform',
            tips:'1画面'
          },
          {
            number:2,   //必须是int（number） 类型 
            name:'el-icon-s-platform',
            tips:'2画面'
          },
          {
            number:3,   //必须是int（number） 类型 
            name:'el-icon-s-platform',
            tips:'3画面'
          },
          {
            number:4,   //必须是int（number） 类型 
            name:'el-icon-menu',
            tips:'4画面'
          },
          {
            number:6,   //必须是int（number） 类型 
            name:'el-icon-s-grid',
            tips:'6画面'
          },
          {
            number:8,   //必须是int（number） 类型 
            name:'el-icon-s-grid',
            tips:'8画面'
          },
          {
            number:9,   //必须是int（number） 类型 
            name:'el-icon-s-grid',
            tips:'9画面'
          },
          {
            number:16,  //必须是int（number） 类型 
            name:'el-icon-s-grid',
            tips:'16画面'
          },
          {
            number:0,   //必须是int（number） 类型  根据业务需求
            name:'el-icon-delete',
            tips:'删除所有视频'
          },
        ],  
      }
  },
  methods:{
    // 点击事件
    cellCountFn(number){
      this.cellCount = number
      this.cellCountArr.length = number
    }
  },
  computed: {
    // 计算类样式属性
    cellClass() {
      return function (index) {
        switch (this.cellCount) {
            case 1:
                return ['player-w1']
            case 2:
                return ['player-w2']
            case 3:
              if(index==0)
                  return ['player-w3-1']
                return ['player-w3-2']
            case 4:
                return ['player-w4']
            case 6:
                if (index == 0)
                    return ['player-w6-1']
                return ['player-w6-2']
            case 8:
                if (index == 0)
                    return ['player-w8-1']
                return ['player-w8-2']
            case 9:
                return ['player-9']
            case 16:
                return ['player-16']
            default:
                break;
        }

      }
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.cell {
  display: flex;
  flex-direction: column;
  height:200px
}
.cell-tool {
  height: 40px;
  line-height: 30px;
  padding: 0 7px;
}
.player {
  height: 200px;
}
.player-w1 {
  width: 100%;
  height:100%;
  box-sizing: border-box;
}
.player-w2 {
  width: 50%;
  height:100%;
  box-sizing: border-box;
  float:left;
}
.player-w3-1 {
  width: 100%;
  height:50%;
  box-sizing: border-box;
  float:left;
}
.player-w3-2 {
  width: 50%;
  height:50%;
  box-sizing: border-box;
  float:left;
}
.player-w4 {
  width: 50%;
  height: 50% !important;
  box-sizing: border-box;/**可有可无 */
  float:left;
}
.player-w6-1 {
  width: 66.66%;
  height: 65.66% !important; /*这里小一点 注意点 */
  box-sizing: border-box;
  float:left;
}
.player-w6-2 {
  width: 33.33%;
  height: 33.33% !important;
  box-sizing: border-box;
  display:inline-table;/**可有可无 */
  float:left;
}
.player-w8-1 {
  width: 75%;
  height: 74% !important;
  box-sizing: border-box;
  float:left;
}
.player-w8-2 {
  width: 25%;
  height: 25% !important;
  box-sizing: border-box;
  display:inline-table; /**可有可无 */
  float:left;
}
.player-9 {
  width: 33.33%;
  height: 33.33% !important;
  box-sizing: border-box;
  float: left;
}
.player-16 {
  width: 25%;
  height: 25% !important;
  box-sizing: border-box;
  float:left;
}
</style>

然后在playVideo.vue组件写播放器的组件。里面其他业务自己实现把。

<template>
  <div class="player">player{{ str1 }}</div>
</template>

<script>
export default {
  name: 'playVideo',
  props: {
      str1: {
          type: String,
          default: ''
      },
  },
  create(){
    console.log("下标",this.str1);
  }
}
</script>

<style scoped>
.player {
    background-color: black;
    height: 100%;
    border: 1px solid white;
    color: white;
    text-align: center;
}
</style>

怕以后第一张图片（效果图）长时间了可能会不见。所以把代码拷贝到项目当中直接实现。也可以运行了。

如果是你的菜，给博主点个赞呗，谢谢。

学到的就要教人 赚到的就要给人。