观察vue中的div宽度变化

Question

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

两者都是固定的，并且 body 有左右填充。

在中间我有 <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);
};