Как добавить класс в тело после нажатия кнопки в компоненте в VUEJS? - PullRequest
Новая
       101

Как добавить класс в тело после нажатия кнопки в компоненте в VUEJS?

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

Я проектирую библиотеку, которая имеет разные модалы (конечно, с помощью Overlay) Когда модал открывается, я все еще могу прокрутить нижний контент. Я хочу как-то использовать overflow:hidden для элемента body, не манипулируя DOM через мой модальный компонент.

Пожалуйста, поделитесь своими идеями со мной!

Ответы [ 3 ]

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

что вы можете сделать, это связать класс, чтобы сделать его динамичным c следующим образом: <h1 :class="{ active: hello }">Show</h1> "active" - ​​это класс, который вы можете стилизовать по своему желанию, а "hello" - это просто свойство, которое вы можете установить как false, а затем вы можете переключаться или просто менять на false в кнопке, подобной этой <button @click="hello = true">Hide title</button>, если вы хотите переключиться, используйте <button @click="hello =! hello">Hide title</button>

`:class="{ active: hello }"` the way it works is that active is only going to be valid if the value you pass after the `:` is true.

здесь я оставил ссылку на sandbox.io так Вы можете увидеть пример:

https://codesandbox.io/s/confident-sun-h4ur9

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

Я понял, что могу использовать элемент root вместо элемента body! Я мог решить проблему с прокруткой фона модального окна, как показано ниже: 

<button @click="modalShow">Show Modal</button>

modalShow() {
  // Trigger Modal Open Here
  this.showModal = true;
  this.$root.$el.classList.add('show-modal');
}
close() {
  // Trigger Modal Close Here
  this.showModal = false;
  this.$root.$el.classList.remove('show-modal');
}

для стиля Css: 

.show-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

Это решило мою проблему. Я надеюсь, что это может помочь вам, ребята:)

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

Добавьте метод в ваш Vue компонент, который создает наложение и добавляет класс без прокрутки к телу. 

/**
 * Create the viewport overlay.
 */
createOverlay() {
  this.overlay = document.createElement('div')
  this.overlay.className = 'overlay'
  this.overlay.addEventListener('click', () => this.close())
  document.body.appendChild(this.overlay)
  document.body.classList.add('no-scrollable')
}

/**
 * Close the Modal when overlay is clicked.
 */
close() {
  // Trigger Modal Close Here
  this.overlay.removeEventListener('click', this.removeOverlay())
}

/**
 * Remove the overlay from the DOM.
 */
removeOverlay() {
  document.body.removeChild(this.overlay)
  document.body.classList.remove('no-scrollable')
}

CSS Стиль: 

.overlay {
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1040;
}

body.no-scrollable {
  overflow: hidden;
}
...