vue实现1,4,6,9分屏视频墙

实现视频分屏

html

<div class="cell">
		<div class="cell-tool">
			<div class="bottom-button-container" >
				<div>
					<el-tooltip class="item" effect="dark" content="1分屏" placement="top">
						<el-button @click="changeLayout(1)" size="small">
							<i class="iconfont icon-fenping_1fenping"></i></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="4分屏" placement="top">
						<el-button @click="changeLayout(4)" size="small">
							<i class="iconfont icon-fenping_4fenping"></i></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="6分屏" placement="top">
						<el-button @click="changeLayout(6)" size="small">
							<i class="iconfont icon-fenping_6fenping"></i></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="9分屏" placement="top">
						<el-button @click="changeLayout(9)" size="small">
							<i class="iconfont icon-fenping_9fenping"></i></el-button>
					</el-tooltip>
				</div>
			</div>
		</div>
		<div class="cell-player">		
			<div :class="`grid-${layout}`" class="gridNum">
				<div v-for="n in layout" :key="n" class="grid-item" :style="getGridItemStyle(n)" >
	
				</div>
			</div>

		</div>
	</div>

js

<script>
	export default {
		data() {
			return {
				layout: 1,
			}
		},
		methods: {
			changeLayout(num) {
				this.layout = num;
			},
			getGridItemStyle(n) {
				
				if (this.layout === 6) {
					if (n === 1) {
						return {
							gridColumn: 'span 2',
							gridRow: 'span 2'
						};
					} else if (n == 2 || n == 3) {
						return {
							gridColumn: 'span 1',
							gridRow: 'span 1'
						};
					} else {
						return {
							gridColumn: 'span 1',
							gridRow: 'span 3'
						};
					}
				} else {
					return {};
				}
			},	
			
		},
	
	}
</script>

css

<style scoped lang="scss">
	.cell{
		width: 100%;
		height: 100%;
		display: flex;
	}
	.cell-tool {
		line-height: 30px;
		padding: 10px 7px;
		background-color: #303030;
		width: 208px;
	}

	.cell-player {
		width: calc(100% - 208px);
	}
	.gridNum{
		height: 92.9%;
	}
	.grid-1{
		width: 100%;
		height: 100%;
		.grid-item {
			width: 100%;
			height: 100%;
		}
	}
	.grid-4 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}

	.grid-6 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}

	.grid-9 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}

	.grid-item {
		text-align: center;
		background-color: #303030;
	}


	

	
</style>