前言

最近项目中需要显示房间中某些设备的位置信息，并用图标表示出来。调查了一番后决定使用Grid布局来实现。
效果如下图所示：

一、设计

1.1 布局设计

多次尝试后，发现将房间分为4行4列显示效果较为合适。

1.1.1 初始设计

给每一个位置分配一个ID（如 1：上左角 2：上左边 3：上边 4：上右边 5：上右角 6：左上边 7：左边 8：左下边 9：右上边 10：右边 11：右下边 12：下左角 13：下左边 14：下边 15：下右边 16：下右角）

// 房间布局设计-----------------------------------上左角---上左边---上边---上右边---上右角-----                         -----左上边                         右上边-----                         -----左 边           房间名          右 边-----                         -----左下边                         右下边-----                         -----下左角---下左边---下边---下右边---下右角-----------------------------------

二、转变为布局

效果：

代码：
roomId为自己定义的字符（‘room-1001-’）

<div class="box"><span class="title">房间名称</span><div class="top"><div class="item"><div :id="roomId + `1`">上左角</div></div><div class="item"><div :id="roomId + `2`">上左边</div></div><div class="item"><div :id="roomId + `3`">上边</div></div><div class="item"><div :id="roomId + `4`">上右边</div></div><div class="item"><div :id="roomId + `5`">上右角</div></div></div><div class="left"><div class="item"><div :id="roomId + `6`">左上边</div></div><div class="item"><div :id="roomId + `7`">左边</div></div><div class="item"><div :id="roomId + `8`">左下边</div></div></div><div class="right"><div class="item"><div :id="roomId + `9`">右上边</div></div><div class="item"><div :id="roomId + `10`">右边</div></div><div class="item"><div :id="roomId + `11`">右下边</div></div></div><div class="bottom"><div class="item"><div :id="roomId + `12`">下左角</div></div><div class="item"><div :id="roomId + `13`">下左边</div></div><div class="item"><div :id="roomId + `14`">下边</div></div><div class="item"><div :id="roomId + `15`">下右边</div></div><div class="item"><div :id="roomId + `16`">下右角</div></div></div></div>

CSS：

.box {width: 400px;height: 400px;border-radius: 4px;border: 1px solid #DCDFE6;position: relative;.title {position: absolute;cursor: pointer;-webkit-transform: translateY(-50%);transform: translateY(-50%);top: 50%;left: 0;right: 0;text-align: center;margin: 0 25%;padding: 20% 10%;font-size: 1em;letter-spacing: 0.1em;.gear-size {width: 1.1em;height: 1.1em;}}.top {display: grid;text-align: center;height: 15%;grid-template-columns: 2rem 2fr 1fr 2fr 2rem;grid-gap: 5px 5px;.item {display: flex;justify-content: center;align-items: start;}.gear-size {width: 1.1em;height: 1.1em;}}.left {display: grid;float: left;vertical-align: middle;margin: 5px 0px;width: 2rem;height: 67.5%;grid-template-rows: repeat(3, 1fr);grid-gap: 5px 5px;.item {display: flex;align-items:center;}.gear-size {width: 1.1em;height: 1.1em;}}.right {display: grid;text-align: right;float: right;margin: 5px 0px;width: 2rem;height: 67.5%;grid-template-rows: repeat(3, 1fr);grid-gap: 5px 5px;.item {display: flex;justify-content: right;align-items:center;}.gear-size {width: 1.1em;height: 1.1em;}}.bottom {display: grid;text-align: center;clear: both;height: 15%;grid-template-columns: 2rem 2fr 1fr 2fr 2rem;grid-gap: 5px 5px;.item {display: flex;justify-content: center;align-items: end;}.gear-size {width: 1.1em;height: 1.1em;}}}.item {font-size: 14px;// border: 1px solid #DCDFE6;}

三、添加文字效果

HTML代码：

<html><head><title></title></head><body><div class="box" id="room-1001"><div class="top"><div class="item"><div id="room-1001-1">上左角</div></div><div class="item"><div id="room-1001-2">上左边</div></div><div class="item"><div id="room-1001-3">上边</div></div><div class="item"><div id="room-1001-4">上右边</div></div><div class="item"><div id="room-1001-5">上右角</div></div></div><div class="left"><div class="item"><div id="room-1001-6">左上边</div></div><div class="item"><div id="room-1001-7">左边</div></div><div class="item"><div id="room-1001-8">左下边</div></div></div><div class="right"><div class="item"><div id="room-1001-9">右上边</div></div><div class="item"><div id="room-1001-10">右边</div></div><div class="item"><div id="room-1001-11">右下边</div></div></div><div class="bottom"><div class="item"><div id="room-1001-12">下左角</div></div><div class="item"><div id="room-1001-13">下左边</div></div><div class="item"><div id="room-1001-14">下边</div></div><div class="item"><div id="room-1001-15">下右边</div></div><div class="item"><div id="room-1001-16">下右角</div></div></div></div></body>
</html>

3.1 替换图标效果

替换为图标函数：
ImageWrapper为自己封装的一个图标组件。
本方法的重点在将布局中的如id为“room-1001-8”的div通过Vue的$mount()方法挂载为想要替换的组件。

showDev(devList) {for (let index = 0; index < devList.length; index++) {const dev = devList[index]const name = this.roomId + dev.idconst room = document.getElementById(name)// 监控if (dev.type === this.$const.deviceType.CCTV) {const id = 'icon-node-' + indexconst ImageWrapper = Vue.extend(imageWrapper)this.curDetail = new ImageWrapper({propsData: {src: this.cctvIcon,id: id}}).$mount(room)}// 温湿度仪if (dev.type === this.$const.deviceType.TEMHUM) {const ImageWrapper = Vue.extend(imageWrapper)this.curDetail = new ImageWrapper({propsData: {src: this.tempIcon}}).$mount(room)}// γ射线检测仪if (dev.type === this.$const.deviceType.RAYDTC) {const ImageWrapper = Vue.extend(imageWrapper)this.curDetail = new ImageWrapper({propsData: {src: this.radioIcon}}).$mount(room)}}}

四、其他

上面的布局效果可以使用函数动态生成。

initRoomLayout(lab) { // 初始化房间方法// const lab = this.$refs.roomconst box = lab.appendChild(document.createElement('div'))box.className = 'box 'box.id = 'room-1001'const title = box.appendChild(document.createElement('span'))title.className = 'title'const top = box.appendChild(document.createElement('div'))top.className = 'top'for (let index = 1; index <= 5; index++) {const item = top.appendChild(document.createElement('div'))item.className = 'item'const div = item.appendChild(document.createElement('div'))// 设置IDdiv.id = box.id + '-' + index}const left = box.appendChild(document.createElement('div'))left.className = 'left'for (let index = 6; index <= 8; index++) {const item = left.appendChild(document.createElement('div'))item.className = 'item'const div = item.appendChild(document.createElement('div'))// 设置IDdiv.id = box.id + '-' + index}const right = box.appendChild(document.createElement('div'))right.className = 'right'for (let index = 9; index <= 11; index++) {const item = right.appendChild(document.createElement('div'))item.className = 'item'const div = item.appendChild(document.createElement('div'))// 设置IDdiv.id = box.id + '-' + index}const bottom = box.appendChild(document.createElement('div'))bottom.className = 'bottom'for (let index = 12; index <= 16; index++) {const item = bottom.appendChild(document.createElement('div'))item.className = 'item'const div = item.appendChild(document.createElement('div'))// 设置IDdiv.id = box.id + '-' + index}}

注：本文介绍重点为实现思路。

HTML布局之Grid模拟房间方位布局，显示摄像头等设备图标相关推荐

CSS - 网格布局（grid）
目录什么是网格布局网格布局与弹性布局的比较网格布局中的概念名词网格容器 display:grid.display:inline-grid 网格轨道 grid-template-rows.gri ...
WPF教程六：布局之Grid面板（转）
WPF教程六:布局之Grid面板 Grid:网格面板 Grid顾名思义就是"网格",以表格形式布局元素,对于整个面板上的元素进行布局,它的子控件被放在一个一个事先定义好的小格子里面 ...
AWT_方位布局（Java）
AWT_方位布局(Java) 示例代码1: package Demo01;import java.awt.*;public class TestBorderlayout {public static ...
网格布局（Grid）
概述 1.网格布局(Grid)是最强大的 CSS 布局方案. 2.它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. ...
GRID（网格）布局
GRID布局 GRID布局将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置. 但是,它们也存在重大区别. Fle ...
(转)WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel
回顾上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...
《tkinter实用教程四》tkinter 布局管理 Grid
更多<Tkinter 实用教程>系列文章 tkinter 表格布局管理 Grid 在学习其他控件之前,我们需要先了解 tkinter 布局管理概念(解决控件放在哪里的问题). 虽然, tk ...
CSS栅格布局（Grid）
今天写页面布局,突然想到了栅格布局,以往习惯了弹性布局,然后发现栅格布局有点香,然后就简单的整理了一下,用于学习与分享. 一.什么是栅格布局可以理解为将一个元素分成行列,然后可以设置对应的大小.布局 ...
【布局】 Grid网格布局
Grid布局基础知识和浏览器支持截至2022年4月,大部分浏览器都提供了对 CSS Grid 的原生支持,而且无需加浏览器前缀,Internet Explorer 10和11也支持它,却是一个 ...

HTML布局之Grid模拟房间方位布局，显示摄像头等设备图标

目录

前言