使用Vue js的相对div内部动态Css缩放绝对div

Question

我正在为mobile-browser和Vue.js做一个与电影相关的项目。我得到了position:absolute在position:relative div中的座位规划。除了座位规划之外，我还希望座位计划可以缩放。我通过设置父scale的div使其具有可伸缩性。然而，这也有几个问题。

由于座位是position:absolute.

• I，所以座椅不是水平中心的屏幕，因为当我放大左边的座位时，座椅的比例要与父div.

• Also相匹配。

这是我的密码：

​

var app = new Vue({
  el: '#app',
  data: {
    seats,
    zoomScale: 1,
  },
  methods: {
    zoom: function (action) {
      if (action == '-') this.zoomScale -= 0.2;
      else if (action == '+') this.zoomScale += 0.2;
      else this.zoomScale = 1;
    }
  }
})

.screen {
  width: 400px;
  text-align: center;
}

.seat-plan {
  border: 1px solid pink;
  position: relative;
  width: 400px;
  height: 300px;
  
  overflow: auto;
}

.zoom-able {
  position: relative;
  width: 100%;
  height: 100%;
}

.seat {
  position: absolute;
  appearance: none;
  background: gray;
  color: white;
  border: 0;
  font-size: 0.6rem;
  width: 22px;
  height: 22px;
}

<div id="app">
  <div class="screen">Screen</div>

  <div class="seat-plan">

    <div
      class="zoom-able"
      :style="{transform: `scale(${zoomScale})`}"
    >
      <button
        class="seat"
        v-for="(seat, index) in seats"
        :key="index"
        :style="{left: `${seat.x}px`,top: `${seat.y}px`}"
       >
        {{ index }}
      </button>
    </div>

  </div>

  <div>{{ zoomScale }}</div>
  <div class="zoom-buttons">
    <button @click="zoom('-')">-</button>
    <button @click="zoom('default')">default</button>
    <button @click="zoom('+')">+</button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var seats = [{"x":78,"y":0,},{"x":104,"y":0,},{"x":130,"y":0,},{"x":156,"y":0,},{"x":182,"y":0,},{"x":208,"y":0,},{"x":234,"y":0,},{"x":286,"y":0,},{"x":312,"y":0,},{"x":338,"y":0,},{"x":364,"y":0,},{"x":390,"y":0,},{"x":416,"y":0,},{"x":52,"y":34,},{"x":78,"y":34,},{"x":104,"y":34,},{"x":130,"y":34,},{"x":156,"y":34,},{"x":182,"y":34,},{"x":208,"y":34,},{"x":234,"y":34,},{"x":286,"y":34,},{"x":312,"y":34,},{"x":338,"y":34,},{"x":364,"y":34,},{"x":390,"y":34,},{"x":416,"y":34,},{"x":442,"y":34,},{"x":52,"y":68,},{"x":78,"y":68,},{"x":104,"y":68,},{"x":130,"y":68,},{"x":156,"y":68,},{"x":182,"y":68,},{"x":208,"y":68,},{"x":234,"y":68,},{"x":286,"y":68,},{"x":312,"y":68,},{"x":338,"y":68,},{"x":364,"y":68,},{"x":390,"y":68,},{"x":416,"y":68,},{"x":442,"y":68,},{"x":52,"y":102,},{"x":78,"y":102,},{"x":104,"y":102,},{"x":130,"y":102,},{"x":156,"y":102,},{"x":182,"y":102,},{"x":208,"y":102,},{"x":234,"y":102,},{"x":286,"y":102,},{"x":312,"y":102,},{"x":338,"y":102,},{"x":364,"y":102,},{"x":390,"y":102,},{"x":416,"y":102,},{"x":442,"y":102,},{"x":52,"y":136,},{"x":78,"y":136,},{"x":104,"y":136,},{"x":130,"y":136,},{"x":156,"y":136,},{"x":182,"y":136,},{"x":208,"y":136,},{"x":234,"y":136,},{"x":286,"y":136,},{"x":312,"y":136,},{"x":338,"y":136,},{"x":364,"y":136,},{"x":390,"y":136,},{"x":416,"y":136,},{"x":442,"y":136,},{"x":78,"y":170,},{"x":104,"y":170,},{"x":130,"y":170,},{"x":156,"y":170,},{"x":182,"y":170,},{"x":208,"y":170,},{"x":234,"y":170,},{"x":286,"y":170,},{"x":312,"y":170,},{"x":338,"y":170,},{"x":364,"y":170,},{"x":390,"y":170,},{"x":416,"y":170,}]
</script>

​

Answer 1

好吧，我一直在解决错误的问题。最后，我从这个Q&A中找到了解决方案。

问题来自于css transform-origin，这导致了transform: scale()时按钮的定位。因此，解决方案是用div包装按钮并设置transform-origin: 0 0;，这将在缩放时重新设置div包装按钮的来源。