在vue中观察div宽度变化

Question

我有一个 nuxt 应用程序，其中有两个侧边栏，一个在左侧，一个在右侧。

两者都是固定的，身体左右都有填充。

在中间我有

<nuxt/>

加载页面。

左侧边栏可以最小化为

60px

，因此我无法为此使用媒体查询，并且我需要观察

<nuxt/> width

的更改，以防宽度为

< 500px

我会添加一些其他类。比如媒体查询元素而不是视口。

有没有一种方法可以在不需要额外的 javascript 库、插件等的情况下做到这一点？

Answer 1

更新了两个滑块示例：

实现所需行为的一种方法是将动态

width

绑定到滑块并观察

width

属性，然后在更改时使用元素

ref

绑定类：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: "#app",
  data() {
    return {
      silderWidth: {
        first: '100',
        second: '100'
      }
    }
  },
  computed: {
    first() {
      return this.silderWidth.first
    },
    second() {
      return this.silderWidth.second
    }
  },
  methods: {
    toggleWidth(ele) {
      this.silderWidth[ele] === '100' ?
        this.silderWidth[ele] = "200" :
        this.silderWidth[ele] = "100"
    }
  },
  watch: {
    first() {
      this.$nextTick(() => {
        this.silderWidth.first === '200' ?
          this.$refs.silderWidth1.classList.add('background') :
          this.$refs.silderWidth1.classList.remove('background')
      })
    },
    second() {
      this.$nextTick(() => {
        this.silderWidth.second === '200' ?
          this.$refs.silderWidth2.classList.add('background') :
          this.$refs.silderWidth2.classList.remove('background')
      })
    }
  }
})

.silder {
  background-color: red;
  height: 200px;
}

.silder--1 {
  position: fixed;
  left: 0;
  top: 0;
}

.silder--2 {
  position: fixed;
  right: 0;
  top: 0;
}

.background {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="silder silder--1" ref="silderWidth1" :style="{ width : first + 'px'}" @click="toggleWidth('first')"></div>
  <div class="silder silder--2" ref="silderWidth2" :style="{ width : second + 'px'}" @click="toggleWidth('second')"></div>
</div>

Answer 2

希望这有帮助：

window.onresize = () => {
    let width = document.querySelector('nuxt').offsetWidth;
    console.log(width);
};