div大小变化时的Vue调用方法

Posted 2023-02-23

【中文标题】div大小变化时的Vue调用方法

【英文标题】：Vue Call Method when div Size Changes

【发布时间】：2022-01-13 18:25:29

【问题描述】：

每次div 的大小（宽度或高度）发生变化时，我如何执行某些方法？

<template>
  <div>
  </div>
</template>

<script>
export default 
    methods: 
        redraw() 
            // ...
        
    

</script>

【问题讨论】：

你可以使用 new ResizeObserver(() => ).observe(this.$refs.some_div) developer.mozilla.org/en-US/docs/Web/API/ResizeObserver - 如果你的 div 实际上可以调整大小

见：playcode.io/842526

【参考方案1】：

您可以动态定义数据的宽度和高度，然后对这些尺寸进行监视。像这样的：

更新 Lawrence Cherone 的评论让我意识到我在这里犯了一个错误。

<template>
  <div :style="width: divWidth, height: divHeight">
  </div>
</template>

<script>
export default 
    data():
        return 
           divWidth: '100px',
           divHeight: '100px'
        
    ,
    watch: 
        divWidth (newVal)
           if(newVal)
               this.redraw()
           
        ,
        divHeight (newVal)
           if(newVal)
               this.redraw()
           
        ,
    methods: 
        redraw() 
            // ...
        
    

</script>

【讨论】：

你的解决方案不行，你试过了吗？

没有。我只是告诉你如何解决你的问题。你放在这里的样本我无能为力。

对不起，我没看到你不是问的人?。请您在这里为我指出错误吗？