계산 된 이미지는 항상 I 객체의 Vuex 배열로부터로드 된 다수의 화상의 폭의 합을 계산해야 제로

Question

복귀 뷰에로드 크기 : 그러나

var activities = [ 
     { 
      id: 1, 
      imageUrl: '/static/images/activity1.jpg', 
     }, 
     { 
      id: 2, 
      imageUrl: '/static/images/activity2.jpg', 
     } 
    ] 

를, 사이즈가 제로가 항상 내가 직접 장착() 메소드에서 테스트하는 경우에도 :

mounted: function() { 
     console.log(document.getElementById('scroller-list').children[0].firstChild.offsetWidth) 
    }, 

모든 렌더링 후 그 크기를 가져 뷰를 강제로 어떤 방법이 있나요?

Answer 1

나는 내 코드에서 비슷한 경우가있다. (이게 더 도움이되기를 바란다.) 내 경우에는 캔버스 (이미지를 담는)의 크기를 조정하려고한다. 유일한 차이점은 childern 위로 반복하고 너비를 합산해야한다는 것입니다.

methods: { 
    resizeCanvas() { 
     var ratio = Math.max(window.devicePixelRatio || 1, 1) 
     var canvas = document.querySelector('canvas') 
     if (canvas) { 
     canvas.width = canvas.offsetWidth * ratio 
     canvas.height = canvas.offsetHeight * ratio 
     canvas.getContext('2d').scale(ratio, ratio) 
     } 
    } 
    } 


mounted() { 
    const canvas = document.querySelector('canvas') 

    window.addEventListener('resize', this.resizeCanvas) 
    this.resizeCanvas() 
}