Question

在 vuetify stepper 组件内部，我嵌入了自己的vue组件。我想根据其宽度定义div的高度，以使其具有“ DIN A”表的比例。问题：安装组件时div的宽度为0，我不知道何时重复测量。

我需要正确分配div的比例，并且应该具有响应能力。如果显示div上下文后触发了一个事件，则可以正确设置高度。

在父级组件中：

<v-stepper-content step="4">
                <ad-preview></ad-preview>
...

子组件的模板如下：

<template>
    <v-container fluid>
        <v-layout row wrap>
            <v-flex class="xs12 sm6" ref="cont">
                <div id="previewPdfContainer">
                </div>
            </v-flex>
            <v-flex class="xs12 sm6">
                <h3>Messages</h3>
                <v-btn @click="setContainerSizes">Test</v-btn>
            </v-flex>
        </v-layout>
    </v-container>
</template>

在脚本部分，我定义了以下方法：

getWindowWidth() {
                this.containerWidth = this.$refs.cont.offsetWidth;
            },
setContainerSizes(){
                this.getWindowWidth();
                this.containerHeight = this.containerWidth * 1.414285714285714;                document.querySelector('#previewPdfContainer').style.width = this.containerWidth + "px";                document.querySelector('#previewPdfContainer').style.height = this.containerHeight + "px";
            }

在mount（）中，我将其称为“ this.setContainerSizes（）”，但宽度为0 ，因为在安装组件时div是“不可见的” ！

要测试，我添加了“测试”按钮。当我单击按钮时，结果是正确的：div的高度设置为正确的值。

我希望有一个计划好的解决方案，这样我就不必通过setInterval或通过vuex（“ step”属性的全局值）切换到变通方法。

每一个线索我都很感谢。

Answer 1

我知道这是一种解决方法，但是您可以检查v-flex的调整大小。类似于以下内容：

new ResizeObserver(setContainerSizes).observe(myVFlex)

缺少事件以检测何时显示特定的<v-stepper-content>？

1 个答案: