当前位置：首页 > VUE

vue实现选座

2026-03-29 11:29:11VUE

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>