使用vue编写一个电影选座组件

好的，以下是一个简单的电影选座组件示例：

<template>
  <div class="seat-wrapper">
    <div class="screen">屏幕</div>
    <div class="seats">
      <div v-for="(row, rowIndex) in seatMap" :key="rowIndex" class="seat-row">
        <div v-for="(seat, colIndex) in row" :key="colIndex" class="seat" :class="{ selected: seat.selected, unavailable: !seat.available }" @click="toggleSeat(seat)">
          {{ seat.seatName }}
        </div>
      </div>
    </div>
    <div class="selected-seats">
      <span v-for="seat in selectedSeats" :key="seat.seatName">{{ seat.seatName }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seatMap: [
        [{ seatName: "1A", available: true, selected: false }, { seatName: "1B", available: true, selected: false }, { seatName: "1C", available: true, selected: false }],
        [{ seatName: "2A", available: true, selected: false }, { seatName: "2B", available: false, selected: false }, { seatName: "2C", available: true, selected: false }],
        [{ seatName: "3A", available: true, selected: false }, { seatName: "3B", available: true, selected: false }, { seatName: "3C", available: true, selected: false }]
      ],
      selectedSeats: []
    };
  },
  methods: {
    toggleSeat(seat) {
      if (seat.available) {
        seat.selected = !seat.selected;
        if (seat.selected) {
          this.selectedSeats.push(seat);
        } else {
          this.selectedSeats.splice(this.selectedSeats.indexOf(seat), 1);
        }
      }
    }
  }
};
</script>

<style>
.seat-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
.screen {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.seats {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.seat-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.seat {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  &.selected {
    background-color: #f00;
    color: #fff;
  }
  &.unavailable {
    background-color: #ccc;
    cursor: not-allowed;
  }
}
.selected-seats {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  span {
    margin-right: 10px;
  }
}
</style>

使用方法：

在父组件中可以这样使用：

<template>
  <div>
    <movie-seat></movie-seat>
  </div>
</template>

<script>
import MovieSeat from "./MovieSeat.vue";

export default {
  components: {
    MovieSeat
  }
};
</script>

其中，MovieSeat.vue 为上面的组件代码。