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

Question

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

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

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

Answer 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