HTML offsetLeft延迟更改

Question

canvas我的屏幕有四个,位于上方两个,下方两个.

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

此按钮位于每个画布上方,绝对位置基于画布offsetTop和offsetLeft画布.

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

奇怪的是,如果我调整屏幕大小,也调用resize功能,一切都会到达正确的位置.

编辑:附加信息:我正在使用VueJS,为了隐藏其他画布,我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();
    }

最后,尺寸吸气剂:

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

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

同时，如果 setTimeOut 感觉不适合您，您可以通过使用Vue: nextTick来设置操作顺序（样式重新计算、重绘），以更“Vue 方式”进行操作。