阅读 241

Vue 实现在线选座功能(支持miniMap,支持缩放)

前言

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


一、功能介绍

  1. 支持选座区域划分
  2. 支持缩放选座区域大小(可配置)
  3. 支持拖拽选择区域
  4. 支持miniMap 拖拽
  5. 通过数据支持简单编辑座位布局

二、选座页面效果

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

三、实现原理

布局设计方面

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 判断座位选中状态以及样式, rowcol分别是几行几列

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,以至于自己动手写了。

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

文章分类
前端
文章标签