Какой лучший способ использовать этот скрипт в Vue. js? - PullRequest
Новая
       3

Какой лучший способ использовать этот скрипт в Vue. js?

0 голосов
/ 15 января 2020

Я нашел учебник, который охватывал ту же функциональность для Angular. Вот код: 

openModal() {
  document.getElementById('imgModal').style.display = "block";
 }
 closeModal() {
  document.getElementById('imgModal').style.display = "none";
 }
 plusSlides(n) {
  this.showSlides(this.slideIndex += n);
 }
 currentSlide(n) {
  this.showSlides(this.slideIndex = n);
 }
 showSlides(slideIndex);
 showSlides(n) {
  let i;
  const slides = document.getElementsByClassName("img-slides") as HTMLCollectionOf < HTMLElement > ;
  const dots = document.getElementsByClassName("images") as HTMLCollectionOf < HTMLElement > ;
  if (n > slides.length) {
   this.slideIndex = 1
  }
  if (n < 1) {
   this.slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
   slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
   dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[this.slideIndex - 1].style.display = "block";
  if (dots && dots.length > 0) {
   dots[this.slideIndex - 1].className += " active";
  }
 }
}

Он напрямую меняет имена и стили классов с помощью документа. Какой лучший способ реализовать эту функцию в vue. js?

1 Ответ

1 голос
/ 15 января 2020

Вариант 1 - $ refs

Для получения элемента из DOM используйте ref. Если вы установите HTML для атрибута элемента ref, например, <button ref="myButton">, тогда вы можете изменить стиль так же, как в вашем коде: this.$refs.myButton.style.display="none"

Относительно циклов: ref будет справка только в том случае, если элементы с одинаковым ref были созданы v-for. В этом случае this.$refs.<your ref> будет массивом. Пример: допустим, у вас есть изображения, отображаемые v-for с тем же ref: 

<img v-for="image in images" ref="imgSlide"...>

Тогда вы можете манипулировать this.$refs.imgSlide как массивом: 

this.$refs.imgSlide.forEach(el => el.style.display = 'none')

Вариант 2 - Привязки классов и стилей

Допустим, у вас есть <img id='imgModal'...>. Вы хотите изменить display в методе openModal. Выполните следующие шаги:

  • Добавьте привязку стиля: <img id='imgModal' :style="{ display: displayValue }"...
  • Добавьте переменную привязки в данные и инициализируйте ее: 
data: {
  displayValue: 'none'
}
  • Измените значение переменной связывания в методе: 
openModal() {
  this.displayValue = 'block'
}

При таком подходе вам не нужны циклы для изменения стиля для нескольких элементов. Изменение переменной привязки повлияет на все связанные с ней элементы.

Подробнее о Привязки классов и стилей

Специально для display = "none": не скрывать элементы путем изменения display явно. Вместо этого используйте v-if или v-show.

...