Question

如何监视视口是否在水平方向上调整了大小？

我希望其中一个存在（but it doesn't）：

window.addEventListener( 'resizeX', this.fooBar );
window.addEventListener( 'resizeHorizontal', this.fooBar );

我当前使用此命令：window.addEventListener( 'resize', this.fooBar );监视视口大小是否更改。但是在移动设备上，由于导航栏的自动隐藏/显示，它变得疯狂起来。因此，最好只监视水平调整大小。

理想情况下，我正在寻找可以混入mixin并添加到我所有Vue组件中的东西。因此，如果我不必在变量中“存储旧的/当前的” viewportWidth并在每次调整大小时覆盖它，那将是理想的。但这是理想的 ...

这是我尝试过的：

...
data: function() {
  viewportWidth: 0,
  oldViewportWidth: 0,
  viewportWidthChanged: false
},
methods: {
  uponResize: function(){
    this.viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0, document.body.clientWidth);

    if( this.viewportWidth !== this.oldViewportWidth ){
      this.oldViewportWidth = this.viewportWidth;
      this.viewportWidthChanged = true;
    } else {
      this.viewportWidthChanged = false;
    }
  }
},
created() {
  window.addEventListener( 'resize', this.uponResize );
},
destroyed() {
window.removeEventListener( 'resize', this.uponResize );
}
...

记住，这是在混入中。因此，该函数会在每个组件的的每次调整大小时运行。

但是即使我仅在垂直方向上调整浏览器的大小，`viewportWidthChanged'也会返回true。

有人可以看到为什么吗？

Vanilla Javascript AddEventListener可以水平调整大小（无需jQuery）

0 个答案: