Dynamic Css在Vue js的相对div内缩放绝对div

问题描述 投票：0回答：1

我正在使用Vue.js为移动浏览器开发与电影相关的项目。我在position:absolute position:relative内有div的座位计划。除了座位计划之外，我还希望座位计划可以缩放。我设法通过设置父级scale的div使它可伸缩。但是，这有几个问题。

  1. 因为它们是position:absolute，所以座椅不在Screen的水平中心。
  2. 我希望座位计划的缩放比例适合父级div。
  3. 此外，当我放大时，左侧的座位也不可见。

这是我的代码：

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个回答
0
投票

看看这个解决方案

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: absolute;
  left: 0;
  top: 0;
}

.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.