Vue / Vuetify：获取 v-flex 的尺寸

Posted 2023-02-23

【中文标题】Vue / Vuetify：获取 v-flex 的尺寸

【英文标题】：Vue / Vuetify: get dimensions of v-flex

【发布时间】：2019-06-30 20:33:03

【问题描述】：

Vuetify 有 v-resize 指令，示例展示了如何将它与窗口大小一起使用。

如何使用它来监控其中组件的大小（例如 v-flex）。

在链接的代码框中，目标是将 svg 宽度/高度 = 设置为 v-flex 宽度和高度。

【参考方案1】：

您在演示中的代码不正确，您将onResize() 结果保存到this.windowSize，但您在template 中引用了mx 和my。

<template>
  <v-app>
    <v-container dark grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs12 v-resize="onResize">
          <v-card color="primary"> <svg></svg> </v-card>
        </v-flex>
      </v-layout>
      mounted x:  windowSize.x  mounted y:  windowSize.y 
    </v-container>
  </v-app>
</template>

<script>
export default 
  name: "Test",
  data: () => ( windowSize:  x: 0, y: 0, mx: 0, my: 0  ),
  methods: 
    onResize() 
      this.windowSize =  x: window.innerWidth, y: window.innerHeight ;
    
  ,
  mounted() 
    this.onResize();
  
;
</script>

在这里，我修复了你的沙盒：https://codesandbox.io/s/k53oyn3n07

【讨论】：

不正确...，我在其他帖子中读到，在安装组件时使用 ref 不起作用，所以我保持单独安装以防遇到该问题...我也只是展示了如何使用窗口大小来做到这一点。问题是关于监控 v-flex 元素