观察vue中的div宽度变化

Posted 2023-02-22

【中文标题】观察vue中的div宽度变化

【英文标题】：Watching for div width changes in vue

【发布时间】：2019-12-18 11:12:58

【问题描述】：

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

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

在中间我有 <nuxt/> 加载页面。

左侧边栏可以最小化为60px，所以我不能为此使用媒体查询，我需要注意<nuxt/> width的变化，以防宽度为< 500px我会添加一些其他类。类似于元素而不是视口的媒体查询。

有没有办法在没有额外的 javascript 库、插件等的情况下做到这一点？

【参考方案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>

【讨论】：

好但还不够，我可以以某种方式聆听任何类型的宽度变化，然后将其分配给数据值吗？点击后我没有取得太多成就

@Learner 遗憾的是，我正在寻找可以做到这一点的东西，例如事件侦听器来检测元素调整大小的变化，但找不到任何有用的东西

看来你是对的，我找到了这个，它是附加包，但我会试一试：itnext.io/…

这个github.com/Kelin2025/vue-responsive-components 完全符合我们的需要。我在编程方面很烂，所以我不知道它是如何工作的，但确实如此：D

似乎将其添加到插件并使用模式：'client'fixed

【参考方案2】：

希望这会有所帮助：

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

【讨论】：

欢迎来到 Stack Overflow -tour，请查看How to Answer。您必须提供有关此代码如何解决 OP“原始海报”问题的说明。