单击VUEJS中组件中的按钮后如何向主体添加类？

Question

我正在设计一个具有不同模态的库（当然使用Overlay）。当模式打开时，我仍然可以滚动下面的内容。我想以某种方式将overflow:hidden用于body元素而不通过我的Modal Component来操作DOM。

请与我分享您的想法！

Answer 1

在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')
}

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;
}