HTML offsetLeft độ trễ để thay đổi

Question

Tôi có bốn canvas trong màn hình của tôi, đặt hai ở trên và hai bên dưới.

Mỗi người có một nút để có thể tối đa hóa canvas, ẩn những người khác.

Nút này được đặt ở trên mỗi canvas, với vị trí tuyệt đối dựa trên offsetTop và offsetLeft của canvas.

Tuy nhiên, khi tôi tối đa hóa hoặc thu nhỏ canvas, công thức nút chỉ cập nhật thuộc tính width.

Điều lạ lùng là nếu tôi thay đổi kích thước màn hình, cũng gọi hàm resize, mọi thứ diễn ra đúng nơi.

EDIT: Thông tin thêm: Tôi đang sử dụng VueJS và, để ẩn các vải khác, tôi áp dụng v-show="false" với họ mẹ divs, mà chỉ áp dụng display: none.

Một số đoạn:

thay đổi kích thước ban đầu và người nghe:

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

Hub thay đổi kích thước:

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

mặc định thay đổi kích thước của bảng điều khiển và thay đổi kích thước phương pháp. Các "expandStyles" là phong cách css áp dụng cho các nút:

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

Và cuối cùng, thu khí chiều:

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

Tôi đồng ý với Sphinx, nó có vẻ như vấn đề nằm với tuyên truyền của các thuộc tính phản ứng trong this.expandStyles tới DOM thực tế. Sẽ hữu ích nếu bạn có thể chia sẻ một phần của mẫu có canvases và ứng dụng định vị của bạn.

Trong khi đó, nếu setTimeOut không cảm thấy phù hợp với bạn, bạn có thể làm nhiều việc hơn "Vue-way" bằng cách sử dụng Vue: nextTick để đặt thứ tự hoạt động (kiểu tính toán lại, vẽ lại).