vue实现选座
Vue 实现选座功能
选座功能常见于影院、剧院、演唱会等场景，Vue 可以很好地实现这一功能。以下是实现选座功能的几种方法和关键步骤。
数据结构设计
选座功能的核心是座位数据的组织。通常使用二维数组或对象数组来表示座位布局。
data() {
return {
seats: [
[{ id: 'A1', status: 'available' }, { id: 'A2', status: 'available' }],
[{ id: 'B1', status: 'unavailable' }, { id: 'B2', status: 'available' }]
],
selectedSeats: []
}
}status字段表示座位状态，常见值有：
available: 可选unavailable: 已售/不可选selected: 已选中
渲染座位图
使用嵌套的v-for循环渲染座位布局，为每个座位绑定点击事件。
<div v-for="(row, rowIndex) in seats" :key="rowIndex" class="seat-row">
<div
v-for="(seat, colIndex) in row"
:key="colIndex"
:class="['seat', seat.status]"
@click="selectSeat(seat)"
>
{{ seat.id }}
</div>
</div>座位选择逻辑
实现座位选择的核心方法，需要考虑座位状态切换和已选座位管理。
methods: {
selectSeat(seat) {
if (seat.status === 'unavailable') return;
const index = this.selectedSeats.findIndex(s => s.id === seat.id);
if (index === -1) {
if (this.selectedSeats.length >= 5) {
alert('最多选择5个座位');
return;
}
seat.status = 'selected';
this.selectedSeats.push(seat);
} else {
seat.status = 'available';
this.selectedSeats.splice(index, 1);
}
}
}样式设计
通过CSS实现座位可视化，不同状态显示不同样式。
.seat {
width: 30px;
height: 30px;
margin: 5px;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 3px;
}
.available {
background-color: #4CAF50;
color: white;
}
.unavailable {
background-color: #f44336;
cursor: not-allowed;
}
.selected {
background-color: #FFC107;
color: black;
}高级功能实现
对于更复杂的需求，可以考虑以下增强功能：
实时同步 使用WebSocket或Firebase实现多用户实时选座同步，避免座位冲突。
座位分组 实现家庭座、情侣座等特殊座位组合的选择逻辑。
可视化提示 添加hover效果显示座位详细信息，或使用SVG绘制更复杂的座位图。
持久化存储 将已选座位保存到本地存储或后端数据库，防止页面刷新丢失选择状态。
性能优化
对于大规模座位图(如体育场)，考虑以下优化措施：
虚拟滚动 只渲染可视区域内的座位，减少DOM节点数量。
懒加载 分区域或分批加载座位数据，减轻初始渲染压力。
状态管理 对于复杂应用，使用Vuex集中管理座位状态，便于跨组件通信。
实现选座功能时，应根据具体业务需求调整数据结构和交互逻辑，上述方案提供了基础实现思路和关键代码片段。
