css display:grid布局,实现任意行、列合并后展示,自适应大小屏幕

现有6X7列的一个布局,如下图所示

想要用户能组成任意矩形盒子,并展示内容,具体效果如下(仅为一个示例,其实可以任意组合矩形):

html代码:

html 复制代码
<div class="grid-container">
	<div class="grid-item"  
		v-for="(v,k) in boxList" 
		:key="k"
		:style="getStyle(v)"
	>{{v.num}}</div>
</div>

首先循环出42个格子,js代码

typescript 复制代码
getData() {
	// 指定每行最大的元素数量
	const maxPerRow = 6;
	// 循环生成 42 个元素
	for (let i = 1; i <= 42; i++) {
		// 计算当前元素所在的行和列
		let row = Math.ceil(i / maxPerRow);
		let col = i % maxPerRow === 0 ? maxPerRow : i % maxPerRow;
		let data = {
			num: i,
			x: [row, col],
			merge: [0, 0],//[合并行数,合并列数]
		};
		// 添加对象到数组
		this.boxList.push(data);
	}
},

此时会生成如图1所示的42个格子,让用户去勾选格子合并,合并逻辑后端完成。

样式合并方法如下:

typescript 复制代码
getStyle(v) {
	const styles = {};
		if (v.merge[0] > 0) {//合并列
			styles['grid-row'] = `${v.x[0]} / span ${v.merge[0]}`;
		}
		if (v.merge[1] > 0) {//合并行
			styles['grid-column'] = `${v.x[1]} / span ${v.merge[1]}`;
		}
		return styles;
	},

模拟后端数据返回方法如下:

bash 复制代码
getData() {
	// 指定每行最大的元素数量
	const maxPerRow = 6;

	// 循环生成 42 个元素
	for (let i = 1; i <= 42; i++) {
		// 计算当前元素所在的行和列
		let row = Math.ceil(i / maxPerRow);
		let col = i % maxPerRow === 0 ? maxPerRow : i % maxPerRow;
		let data = {
			num: i,
			x: [row, col],
			merge: [0, 0],//[合并行数,合并列数]
		};
		if(i == 3) {
			data.merge = [3, 2];
		}
		if(i == 5) {
			data.merge = [3, 2];
		}
		if([19,21,31,33,35].indexOf(i) > -1) {
			data.merge = [2, 2];
		}
		if([23,24].indexOf(i) > -1) {
			data.merge = [2, 0];
		}
		// 添加对象到数组
		if([4,6,9,10,11,12,15,16,17,18,20,22,25,26,27,28,29,30,32,34,36,37,38,39,40,41,42].indexOf(i) == -1) {
			this.boxList.push(data);
		}
	}
},

生成效果为:

相关推荐
Myli_ing13 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风16 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave23 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟25 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18401 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架