javascript - HTML offsetLeft 延迟更改

Question

我的屏幕上有四个 canvas，两个在上面，两个在下面。

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

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

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

奇怪的是，如果我调整屏幕大小，这也调用了 resize 函数，一切都会到正确的位置。

编辑:附加信息:我正在使用 VueJS，为了隐藏其他 Canvas ，我将 v-show="false" 应用到它们的父 divs，仅适用于 display: none。

一些片段:

初始调整大小和监听器:

window.onload = function () {
    resizeAll();
    window.addEventListener('resize', resizeAll, false);
};

调整大小中心:

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

面板的默认调整大小和调整大小方法。 "expandStyles"是应用于按钮的 css 样式:

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();
    }

最后，维度 getter :

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
    };
}

Answer 1

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

与此同时，如果您觉得 setTimeOut 不合适，您可以使用 Vue: nextTick 做一些更“Vue-way”的事情。设置操作顺序(样式重新计算、重绘)。