Dynami c Css Масштабирование абсолютных делителей внутри относительного деления с помощью Vue js - PullRequest
Новая
       24

Dynami c Css Масштабирование абсолютных делителей внутри относительного деления с помощью Vue js

0 голосов
/ 24 апреля 2020

Я работаю над проектом для Cinema для mobile-browser с Vue. js. Я получил план сидения с position:absolute внутри position:relative div. Помимо планировки сидений, я также хочу, чтобы план сидений был масштабируемым. Мне удалось сделать его масштабируемым, установив scale родительского div. Однако есть пара проблем с этим.

  1. Сиденья не горизонтально по центру с Экран , так как они position:absolute.
  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>
...