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 = numberthis.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>

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

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

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

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

16级大一c语言考试题及答案,2013年计算机二级C语言上机试题十六及答案
填空题请补充fun函数,该函数的功能是:判断一个年份是否为闰年．例如,1900年不是闰年,2004是闰年．注意:部分源程序给出如下请勿改动主函数main和其他函数中的任何内容,仅在fun函数的 ...
【Vue】第十六部分插槽（默认插槽、具名插槽、作用域插槽）
[Vue] 第十六部分插槽(默认插槽.具名插槽.作用域插槽) 文章目录 [Vue] 第十六部分插槽(默认插槽.具名插槽.作用域插槽) 16 . 插槽 16.1 默认插槽 16.1.1 不使用插槽的 ...
Vue实战篇二十六：创建动态仪表盘
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
JAVA-集合作业-已知有十六支男子足球队参加2008 北京奥运会。写一个程序，把这16 支球队随机分为4 个组。采用List集合和随机数...
第二题已知有十六支男子足球队参加2008 北京奥运会.写一个程序,把这16 支球队随机分为4 个组.采用List集合和随机数 2008 北京奥运会男足参赛国家: 科特迪瓦,阿根廷,澳大利亚,塞尔维亚 ...
vue引用自定义.css文件 - 语法篇
vue如何引用外部自定义的.css文件 ? 一般都会因为存在权重或优先级设置的问题才会侧意引用: [详情进入查看:如何在scoped不污染组件样式的前提下,实现el-input组件样式覆盖?] 再者, ...
使用VUE组件创建SpreadJS自定义单元格(二)
在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件.想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一). 但是在 ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序，Thymeleaf快速入门，商品详情页的展示）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息这是用来做排序的,默认按照综合排序 ...
5月16日第壹简报，星期一，农历四月十六
5月16日第壹简报,星期一,农历四月十六 1.重磅!个人首套房商贷利率下限调整,可低至4.4%,30年贷款50万利息可省2万. 2.IMF完成特别提款权(SDR)定值审查,人民币权重上调至12.28% ...
已知有十六支男子足球队参加2008 北京奥运会。写一个程序，把这16 支球队随机分为4 个组,每组4只球队。采用List集合和随机数。
已知有十六支男子足球队参加2008 北京奥运会. 写一个程序,把这16 支球队随机分为4 个组,每组4只球队.采用List集合和随机数. package com.qianfeng._wy;import ...
已知有十六支男子足球队参加2008北京奥运会。写一个程序，把这16支球队随机分为4个组。
package com.lovo.homework;import java.util.LinkedList; import java.util.List;public class Homework3 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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