vue实现座位

Vue实现座位布局

使用Vue实现座位布局可以通过组件化和响应式数据管理来简化开发流程。以下是一个完整的实现方案：

数据准备

定义座位数据结构，通常使用二维数组表示行列关系：

data() {
  return {
    seats: [
      [{id: 1, status: 'available'}, {id: 2, status: 'booked'}],
      [{id: 3, status: 'available'}, {id: 4, status: 'available'}]
    ]
  }
}

组件模板

创建可交互的座位组件模板：

<div class="seat-map">
  <div v-for="(row, rowIndex) in seats" :key="rowIndex" class="seat-row">
    <div 
      v-for="seat in row" 
      :key="seat.id"
      :class="['seat', seat.status]"
      @click="selectSeat(seat)"
    >
      {{ seat.id }}
    </div>
  </div>
</div>

样式设计

添加基础CSS样式控制座位外观：

.seat-map {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.seat-row {
  display: flex;
  gap: 8px;
}
.seat {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.seat.available {
  background-color: #e8f5e9;
}
.seat.booked {
  background-color: #ffcdd2;
  cursor: not-allowed;
}
.seat.selected {
  background-color: #bbdefb;
}

交互逻辑

实现座位选择方法：

methods: {
  selectSeat(seat) {
    if (seat.status === 'booked') return;

    seat.status = seat.status === 'selected' 
      ? 'available' 
      : 'selected';

    this.$emit('seat-selected', seat);
  }
}

高级功能扩展

添加筛选和统计功能：

computed: {
  selectedSeats() {
    return this.seats.flat().filter(seat => seat.status === 'selected');
  },
  availableCount() {
    return this.seats.flat().filter(seat => seat.status === 'available').length;
  }
}

响应式布局优化

使用CSS Grid实现更灵活的布局：

.seat-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 8px;
}

键盘导航支持

增强无障碍访问：

mounted() {
  document.addEventListener('keydown', this.handleKeyNavigation);
},
methods: {
  handleKeyNavigation(e) {
    // 实现方向键导航逻辑
  }
}

性能优化

对于大型座位图使用虚拟滚动：

<virtual-list :size="40" :remain="20">
  <!-- 座位行渲染 -->
</virtual-list>

状态持久化

结合Vuex管理全局状态：

const store = new Vuex.Store({
  state: {
    seatMap: []
  },
  mutations: {
    updateSeatStatus(state, payload) {
      // 更新座位状态
    }
  }
})

这种实现方式提供了完整的座位管理功能，包括可视化展示、交互操作和状态管理，可以根据实际需求进一步扩展功能。