Question

我需要计算从Vuex对象数组加载的多个图像的宽度总和：

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

但是，即使我直接在mounted（）方法中测试它，大小也始终为零：

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

有没有办法强制Vue在渲染完所有内容后获取这些尺寸？

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

在Vue中计算负载时的图像大小始终返回零

1 个答案: