elementui组件库实现电影选座面板demo

以下是一个使用Element UI实现的简单电影选座面板的示例代码：

<template>
  <el-row :gutter="20">
    <el-col :span="6" :offset="3">
      <div class="seat-container">
        <div class="seat" v-for="(seat, index) in seats" :key="index"
          :class="{ 'selected': seat.selected, 'available': seat.available, 'unavailable': !seat.available }"
          @click="selectSeat(index)">
          {{ seat.available ? '○' : '●' }}
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <el-button type="primary" @click="confirmSelection">确认选座</el-button>
    </el-col>
  </el-row>
</template>
 
<script>
export default {
  data() {
    return {
      seats: Array(10).fill({ available: true, selected: false })
    };
  },
  methods: {
    selectSeat(index) {
      if (this.seats[index].available) {
        this.seats[index].selected = !this.seats[index].selected;
      }
    },
    confirmSelection() {
      const selectedSeats = this.seats.filter(seat => seat.selected);
      if (selectedSeats.length > 0) {
        this.$message.success('选座成功，已选座位：' + selectedSeats.map(seat => seat.index).join(', '));
      } else {
        this.$message.error('请选择电影座位！');
      }
    }
  }
};
</script>
 
<style scoped>
.seat-container {
  display: flex;
  flex-wrap: wrap;
}
.seat {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ddd;
  margin: 2px;
  cursor: pointer;
}
.selected {
  background-color: #5cb646;
  color: white;
}
.available:hover {
  background-color: #5cb646;
}
.unavailable {
  background-color: #909399;
  cursor: not-allowed;
}
</style>

这段代码使用了Element UI的布局组件<el-row>和<el-col>来构建页面布局，并使用了按钮组件<el-button>用于确认选择。选座面板通过一个数组seats来控制，每个座位由一个对象表示，包含available（是否可用）和selected（是否已选）两个属性。用户点击任意座位时，会触发selectSeat方法，更新对应座位的选择状态。最后，当用户点击确认选座按钮时，会触发confirmSelection方法，检查是否有选择的座位，并通过this.$message.success或this.$message.error来给用户反馈信息。