使用Vue js在相对div内动态Css缩放绝对div答案

【问题标题】：Dynamic Css Scaling absolute divs inside relative div with Vue js使用Vue js在相对div内动态Css缩放绝对div
【发布时间】：2020-04-24 11:18:34
【问题描述】：

我正在使用 Vue.js 为 mobile-browser 开发与 Cinema 相关的项目。我用position:absolute 里面的position:relative div 得到了座位规划。除了座位规划，我还希望座位规划可以缩放。我设法通过设置父div 的scale 使其可扩展。然而，这有几个问题。

座位不在屏幕的水平中心，因为它们是position:absolute。
我希望座位计划的缩放适合家长div。
另外，当我放大时，左侧的座位不可见。

这是我的代码：

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>

【问题讨论】：

标签： css vue.js vuejs2 scale

【解决方案1】：

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

问题出在 transform-origin 的 css 上，这导致了 transform: scale() 时按钮的定位。所以解决方案是用div包裹按钮并设置transform-origin: 0 0;，这将在缩放时重置包裹按钮的div的原点。

【讨论】：