HTML offsetLeft延迟更改

Question

我的屏幕上有四个canvas，位于上方两个，下方两个。

每个人都有一个按钮，可以最大化画布，隐藏其他画布。

此按钮位于每个画布上方，绝对位置基于画布的offsetTop和offsetLeft。

但是，当我最大化或最小化画布时，按钮公式仅更新width属性。

奇怪的是，如果我调整屏幕大小，同时调用resize功能，一切都会到达正确的位置。

编辑：其他信息：我正在使用VueJS，为了隐藏其他画布，我将v-show="false"应用于父divs，仅适用display: none window.onload = function () { resizeAll(); window.addEventListener('resize', resizeAll, false); }; 1}}。

一些片段：

初始调整大小和监听器：

function resizeAll () {
    vue.$refs.panelOne.resizeDefault();
    // ...
    vue.$refs.panelN.resizeDefault();
}

调整大小的中心：

resizeDefault() {
        let dimensions;
        if (this.expanded) {
            dimensions = getScreenDimensions();
        } else {
            dimensions = getHalfScreenDimensions();
        }
        this.resize(dimensions.width, dimensions.height);
    }

resize (width, height) {
        this.canvas.width = width;
        this.canvas.height = height;
        this.expandStyles.top = (this.canvas.offsetTop + 10) + 'px';
        this.expandStyles.left = (this.canvas.offsetLeft + this.canvas.width - 40) + 'px';
        drawInterface.redraw();
    }

该面板调整了默认和调整大小的方法。 ＆＃34; expandStyles ＆＃34;是应用于按钮的css样式：

function getScreenDimensions () {
    return {
        width: window.innerWidth - 310,
        height: window.innerHeight * 0.92
    };
}

function getHalfScreenDimensions () {
    return {
        width: (window.innerWidth - 310) / 2,
        height: (window.innerHeight * 0.92) / 2
    };
}

最后，尺寸吸气剂：

c is undefined

Answer 1

我同意S.P.H.I.N.X，似乎问题在于将this.expandStyles中的反应属性传播到实际DOM。如果您可以共享包含您的画布和定位应用程序的模板部分，那将非常有用。

同时，如果setTimeOut不适合你，你可以做更多的事情＆＃34; Vue-way＆＃34;使用Vue: nextTick设置操作顺序（样式重新计算，重绘）。