Блог

У меня есть приложение vue, в котором я создал несколько методов для перемещения моего div «инструментария» в другой раздел DOM. В настоящее время DIV загружается в правом нижнем углу экрана и статичен, он не перемещается, если я прокручиваю страницу.

Методы, которые я создал, пытаются достичь того же самого, но перемещают DIV в «Верхний левый», «Верхний правый», «Нижний левый», и у меня возникают некоторые проблемы с поиском правильного значения px для заданных функций. Кто-нибудь знает, есть ли лучший способ сделать это?

Мой код:

   <button @click="changePositionTopLeft">Move Top Left</button>
  <button @click="changePositionTopRight">Move Top Right</button>
  <button @click="changePositionBottomLeft">Move Bottom Left</button>


methods: {
changePositionTopLeft() {
  const divPosition = document.getElementById('sdk-ts-root')
  divPosition.style.left = '200px'
  divPosition.style.top = '200px'
},
changePositionTopRight() {
  const divPosition = document.getElementById('sdk-ts-root')
  divPosition.style.right = '400px'
  divPosition.style.top = '400px'
},
changePositionBottomLeft() {
  const divPosition = document.getElementById('sdk-ts-root')
  divPosition.style.left = '400px'
  divPosition.style.bottom = '400px'
}
 

}
}

При использовании Vue (или любой другой подобной библиотеки, такой как React, Svelte и т.д.), Вы не должны напрямую взаимодействовать с DOM, а скорее создавать привязки данных, которые автоматически обновят ваш HTML.

Вот как это должно быть сделано с помощью «способа Vue».:

 let app = new Vue({
  el: '#app',
  data: {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,

  },
  computed: {
    style() {
      return `top: ${this.top}px; right: ${this.right}px; bottom: ${this.bottom}px; left: ${this.left}px;`
    }
  },
  methods: {
    changePositionTopLeft() {
      this.top = 200
      this.left = 200
    },
    changePositionTopRight() {
      this.top = 400
      this.right = 400
    },
    changePositionBottomLeft() {
      this.bottom = 400,
        this.left = 400
    },
    reset() {
      this.top = 0;
      this.right = 0;
      this.bottom = 0;
      this.left = 0;
    }
  }
}) 

 #app {
  position: relative;
  height: 500px;
}

.el {
  position: absolute;
  
  /* some styling */
  height: 50px;
  width: 50px;
  background-color: red;
  color: white;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div :style="style" class="el">DIV</div>
    <button @click="changePositionTopLeft">Move Top Left</button>
    <button @click="changePositionTopRight">Move Top Right</button>
    <button @click="changePositionBottomLeft">Move Bottom Left</button>
    <button @click="reset">Reset</button>
    top: {{top}} right: {{right}} top: {{bottom}} left: {{left}}
</div>