前言

前段时间写了一个在线选座功能，现在分享一下。纯Dom方式实现，包括miniMap，代码没怎么优化，主要提供实现思路。

一、功能介绍

支持选座区域划分
支持缩放选座区域大小（可配置）
支持拖拽选择区域
支持miniMap 拖拽
通过数据支持简单编辑座位布局

二、选座页面效果

在这里插入图片描述分别是正常，缩小，放大后效果

三、实现原理

布局设计方面

1.一行一行渲染座位，通过行对象上的 colSplits 确定行布局，根据area 渲染区域颜色

rowArr: [{
	area: "VIP席"
	colSplits: [4,6,4]
	colTotal: 14
	cols: Array(16)
}]

2.根据 colSplits 处理处 cols 数据，就是一行中，每列数据

cols: [{
	area: "VIP席"
	checked: false
	col: 4
	disabled: false
	id: 7
	price: 10
	roomId: 5
	row: 2
	seatId: 54
	solded: false
	status: "FREE"
}]

3.根据 status 判断座位状态，根据checked 判断座位选中状态以及样式， row与col分别是几行几列

4.间距为特殊的行数据与列数据(这里不同区域有间距)，通过isSide 判断边界

rowArr: [{
	area: "VIP席"
	isSide: true
	number: {
		value: 110
	}
}]

cols: [{
	isSide: true
}]

在这里插入图片描述

交互实现方面

1.左上角小地图同样和选座区域一样实现，通过 transition: scale() 缩放至合适大小。 2.选座区域拖拽通过固定容器大小，撑开内部内容大小，使固定容器出现滚动条(通过样式隐藏滚动条)。 3.拖拽（移动端就是触发滚动事件）获取滚动上下距离，同比与小地图大小比，计算红框范围（可选范围）。 4.拖拽小地图红框（可选范围），计算范围后直接设置固定容器的 滚动值 即可，滚动会触发上面第三条。 5.缩放通过模拟两指距离远近，获取值后通过设置样式 zoom: ? 改变大小。

下面有在线例子，可以对查看

四、在线例子

在线Demo 查看，可编辑示例（缩放效果在移动端查看，两指缩放）

总结

选座功能样式与逻辑交互关联偏多，样式有差异可能造成呈现效果有偏差。还有以上例子原本博主是做小程序嵌入H5 的，在模拟事件时，设置了原有对象属性，在IOS 的微信小程序或报错提示内部对象不可设置属性。

本来不想自己写选座的，但是网上搜索H5 版选座都不支持miniMap，以至于自己动手写了。

以上信息如有疏漏或错误，欢迎指正，谢谢。

Vue 实现在线选座功能（支持miniMap，支持缩放）

前言