Window.resize 또는 document.resize 중 어느 것이 동작하고 어떤 것이 동작하지 않는가?VueJS

Window.resize 또는 document.resize 중 어느 것이 동작하고 어떤 것이 동작하지 않는가?VueJS

사용하고 있다Vuetable정말 멋져요.

상단 수평 스크롤을 작성하려고 합니다.이 작업을 완료하여 정상적으로 동작합니다.하지만 나는 몇 가지 이벤트를 할당해야 합니다.window.resize.

다음과 같은 컴포넌트를 만들었습니다.

<template>
<div class="top-scrollbar">
  <div class="top-horizontal-scroll"></div>
</div>
</template>

<style scoped>
.top-scrollbar {
  width: 100%;
  height: 20px;
  overflow-x: scroll;
  overflow-y: hidden;
  margin-left: 14px;

  .top-horizontal-scroll {
    height: 20px;
  }
}
</style>

<script>
export default {
  mounted() {
    document.querySelector("div.top-scrollbar").addEventListener('scroll', this.handleScroll);
    document.querySelector("div.vuetable-body-wrapper").addEventListener('scroll', this.tableScroll);
  },
  methods: {
    handleScroll () {
      document.querySelector("div.vuetable-body-wrapper").scrollLeft = document.querySelector("div.top-scrollbar").scrollLeft
    },

    tableScroll() {
      document.querySelector("div.top-scrollbar").scrollLeft = document.querySelector("div.vuetable-body-wrapper").scrollLeft
    }
  }
}
</script>

나는 그것을 테이블 위에서 다음과 같이 부르고 있다.<v-horizontal-scroll />

믹스인을 작성했습니다.

Vue.mixin({
  methods: {
    setScrollBar: () => {
      let tableWidth = document.querySelector("table.vuetable").offsetWidth;
      let tableWrapper = document.querySelector("div.vuetable-body-wrapper").offsetWidth;

      document.querySelector("div.top-horizontal-scroll").style.width = tableWidth + "px";
      document.querySelector("div.top-scrollbar").style.width = tableWrapper + "px"
    }
  }
})

사용자 컴포넌트가 다음 사용자 컴포넌트에서Vuetable작성중입니다.

  beforeUpdate() {
    document.addEventListener("resize", this.setScrollBar());
  },

  mounted() {
    this.$nextTick(function() {
      window.addEventListener('resize', this.setScrollBar);
      this.setScrollBar()
    });
  },

저는 이 크기 조정 이벤트가 어떻게 작동하는지 알고 싶습니다.

위 코드에서 단 한 가지라도 변경한다면.문제가 생기기 시작했어요.

스크롤 메인 div의 너비가 올바르게 설정되지 않거나 짝수입니다.this.setScrollBar크기를 조정하지 마십시오.

나는 이것의 이면에 있는 논리가 무엇인지 그리고 그것이 어떻게 작동하는지 확실하지 않다.

언급URL : https://stackoverflow.com/questions/54571647/window-resize-or-document-resize-which-works-which-doesnt-vuejs