vue实现选座
Vue实现选座功能
选座功能常见于影院、剧院、演唱会等场景，Vue可以高效实现交互式选座布局。以下是关键实现步骤：
数据结构设计
使用二维数组或对象数组存储座位信息，每个座位包含状态（可选/已选/不可选）、行列号等属性：
data() {
return {
seats: [
{ row: 'A', col: 1, status: 'available' },
{ row: 'A', col: 2, status: 'unavailable' },
// 更多座位...
]
}
}可视化渲染
通过v-for循环渲染座位网格，动态绑定样式类：
<div class="seat-map">
<div
v-for="(seat, index) in seats"
:key="index"
:class="['seat', seat.status]"
@click="selectSeat(seat)"
>
{{ seat.row }}{{ seat.col }}
</div>
</div>交互逻辑处理
点击座位时更新状态，并维护已选座位列表：
methods: {
selectSeat(seat) {
if (seat.status === 'available') {
seat.status = 'selected';
this.selectedSeats.push(seat);
} else if (seat.status === 'selected') {
seat.status = 'available';
this.selectedSeats = this.selectedSeats.filter(s =>
!(s.row === seat.row && s.col === seat.col)
);
}
}
}样式设计
通过CSS区分不同状态的座位：
.seat {
width: 30px;
height: 30px;
margin: 5px;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.available { background-color: #4CAF50; }
.unavailable { background-color: #f44336; cursor: not-allowed; }
.selected { background-color: #2196F3; }高级功能扩展
- 添加屏幕区域标识
- 实现分区价格差异
- 添加座位类型（VIP/普通）
- 本地存储已选座位
- 与后端API对接验证座位可用性
完整组件示例
<template>
<div>
<h3>屏幕</h3>
<div class="screen"></div>
<div class="seat-map">
<div v-for="(seat, index) in seats" :key="index"
:class="['seat', seat.status]"
@click="toggleSeat(seat)">
{{ seat.row }}{{ seat.col }}
</div>
</div>
<div v-if="selectedSeats.length">
已选座位: {{ selectedSeats.map(s => `${s.row}${s.col}`).join(', ') }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
seats: this.generateSeats(5, 10),
selectedSeats: []
}
},
methods: {
generateSeats(rows, cols) {
// 生成座位数据逻辑
},
toggleSeat(seat) {
// 座位选择切换逻辑
}
}
}
</script>性能优化建议
对于大规模座位图（超过500个座位）：
- 使用虚拟滚动技术
- 分区域懒加载
- 减少响应式数据量
- 使用Canvas/SVG渲染替代DOM
第三方库推荐
- vue-seatmap：专业座位图组件
- vue-virtual-scroller：处理大量座位
- vue-draggable：支持拖拽选座
实现时需考虑不同屏幕尺寸的适配，推荐使用flex布局或CSS grid。对于商业项目，建议加入选座动画效果和音效增强用户体验。
