vue canvas 会议选座出一份demo实例

好的，这里提供一个简单的 Vue.js + Canvas 的会议选座的示例代码：

HTML 模板：

<div id="app">
  <canvas ref="canvas" @click="selectSeat"></canvas>
  <div class="legend">
    <span class="available"></span> 可选座位
    <span class="selected"></span> 已选座位
  </div>
</div>

CSS 样式：

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
canvas {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.legend {
  display: flex;
  justify-content: center;
  align-items: center;
}
.legend span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
.available {
  background-color: #9ccc65;
}
.selected {
  background-color: #f44336;
}

Vue.js 代码：

new Vue({
  el: '#app',
  data: {
    canvas: null,
    ctx: null,
    seats: [
      { row: 'A', col: 1, x: 50, y: 50, selected: false },
      { row: 'A', col: 2, x: 100, y: 50, selected: false },
      { row: 'A', col: 3, x: 150, y: 50, selected: false },
      { row: 'B', col: 1, x: 50, y: 100, selected: false },
      { row: 'B', col: 2, x: 100, y: 100, selected: false },
      { row: 'B', col: 3, x: 150, y: 100, selected: false },
      { row: 'C', col: 1, x: 50, y: 150, selected: false },
      { row: 'C', col: 2, x: 100, y: 150, selected: false },
      { row: 'C', col: 3, x: 150, y: 150, selected: false },
    ],
    selectedSeats: [],
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.drawSeats();
  },
  methods: {
    drawSeats() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.seats.forEach(seat => {
        this.ctx.fillStyle = seat.selected ? '#f44336' : '#9ccc65';
        this.ctx.fillRect(seat.x, seat.y, 30, 30);
        this.ctx.fillStyle = '#333';
        this.ctx.font = 'bold 14px sans-serif';
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'middle';
        this.ctx.fillText(`${seat.row}-${seat.col}`, seat.x + 15, seat.y + 15);
      });
    },
    selectSeat(e) {
      const rect = this.canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const seat = this.seats.find(seat => x >= seat.x && x <= seat.x + 30 && y >= seat.y && y <= seat.y + 30);
      if (seat && !seat.selected) {
        this.selectedSeats.push(seat);
        seat.selected = true;
        this.drawSeats();
      }
    },
  },
});

这个示例代码实现了以下功能：

- 在画布上绘制座位，可用座位为绿色，已选座位为红色。
- 点击可用座位时，将该座位标记为已选，并在画布上重新绘制。
- 将已选座位存储在 `selectedSeats` 数组中。

你可以根据自己的需求进行修改和扩展。