vue实现选座位
Vue 实现选座位功能
数据准备
创建一个座位数组，每个座位对象包含唯一标识符、行列位置和选中状态。示例数据结构如下：
data() {
return {
seats: [
{ id: 1, row: 1, col: 1, selected: false, booked: false },
{ id: 2, row: 1, col: 2, selected: false, booked: true },
// 更多座位...
]
}
}渲染座位布局
使用 v-for 循环渲染座位，通过 CSS 类动态控制样式。关键代码示例：
<div class="seat-map">
<div
v-for="seat in seats"
:key="seat.id"
:class="['seat',
{ 'selected': seat.selected,
'booked': seat.booked }]"
@click="toggleSeat(seat)"
>
{{ seat.row }}-{{ seat.col }}
</div>
</div>处理点击事件
实现座位选择/取消选择逻辑，注意已预订座位不可选：
methods: {
toggleSeat(seat) {
if (!seat.booked) {
seat.selected = !seat.selected
this.$emit('seat-selected', seat)
}
}
}样式设计
基础样式示例（SCSS）：
.seat-map {
display: grid;
grid-template-columns: repeat(8, 40px);
gap: 10px;
}
.seat {
width: 40px;
height: 40px;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&.selected {
background-color: #42b983;
color: white;
}
&.booked {
background-color: #ff4444;
cursor: not-allowed;
}
}高级功能扩展
- 添加屏幕区域标识
- 实现连选功能（按住Shift多选）
- 添加座位类型区分（VIP/普通）
- 与后端API集成保存选择状态
- 使用SVG实现更复杂的座位图形
完整组件示例
<template>
<div>
<h3>屏幕</h3>
<div class="screen"></div>
<div class="seat-map">
<div
v-for="seat in seats"
:key="seat.id"
:class="['seat',
{ 'selected': seat.selected,
'booked': seat.booked }]"
@click="toggleSeat(seat)"
>
{{ seat.row }}-{{ seat.col }}
</div>
</div>
<div>已选座位: {{ selectedSeats }}</div>
</div>
</template>
<script>
export default {
data() {
return {
seats: this.generateSeats(5, 8)
}
},
computed: {
selectedSeats() {
return this.seats.filter(s => s.selected).map(s => `${s.row}排${s.col}座`)
}
},
methods: {
generateSeats(rows, cols) {
// 生成座位数据的实现
},
toggleSeat(seat) {
// 选择逻辑实现
}
}
}
</script>
