nuxt/vue2 如何设置堆叠 div 的宽度以匹配堆叠中的特定 div

Question

找不到完全相同的问题，所以如果这是重复的，请重定向我。我正在与 Nuxt 合作。我有一个图像组件，应该能够处理不同宽度的不同图像。图像将根据 mobile/desktop 视图发生变化，这意味着图像可以根据屏幕变为 wider/narrower。在它的下方和上方，我有一个标题和类似这样的描述：

<div> //flexbox with flex-direction column and justify center
  <h2 >{{insightsImage.title}}</h3>
  <img :src='ifMobile ? mobileImage.url : image.url' />
  <p>some tekst could be very long</p> 
</div>

我希望标题和

始终具有与图像相同的最大宽度，并且它位于页面的中央。因此，如果我有一个很长的描述，它会被切断并保持整齐地堆叠。

像这样：

我已经尝试过各种方法，并且有一个有效的解决方案，但我想知道是否有更好的，也许更 vue 的方式？

理想情况下，我只用 css 就可以做到这一点，但我还没有找到任何适用于可变图像宽度的解决方案。

我目前的解决方案是这样的：

<div>
  <h2 :style='`max-width: ${imageSize}`'>{{insightsImage.title}}</h3>
  <img :src='ifMobile ? mobileImage.url : image.url' />
  <p :style='`max-width: ${imageSize}`'/>some tekst</p> 
</div>


export default defineComponent({
  computed: {
    imageSize(): string {
      if (!process.browser) return '' // need this because Image object does not exist on server side
      const image = new Image();
      image.src = this.image.url;

      return `${image.width > 0 ? image.width : 800}px` // need this 0 check because sometimes for some reason it initially returns 0 as width (might be because of SSR), and most images will be minimal 800px wide
    }

在我发现的所有解决方案中，这个感觉最不成熟，但仍不完美

研究过像这样使用 refs：

但官方文档建议不要（滥用）在计算属性中使用 refs，并且由于 ref 未更新，因此即使图像 src 发生变化，计算宽度也不会改变。

还有其他建议吗？

Answer 1

好的，如果有人需要这个，那么回答我自己的问题。仍然不是 100% 满意，因为我仍在使用内联样式（但也许我只是吹毛求疵）。我原来的解决方案并不总是有效，因为当路由到页面时，图像大小有时为 0（如评论中所述）。经过一些尝试，我终于找到了使用 vue Mounted/Updated 和 image.onload 的组合来在调整屏幕大小时跟踪图像宽度。所以我得到了这个：


<div>
  <h2 :style='`max-width: ${imageSize}`'>{{insightsImage.title}}</h3>
  <img :src='ifMobile ? mobileImage.url : image.url' />
  <p :style='`max-width: ${imageSize}`'/>some tekst</p> 
</div>

export default defineComponent({
 data() {
    return {
      imageSize: ''
    }
  },
  updated() {
    this.updateImageSize()
  },
  mounted() {
    this.updateImageSize()
  },
  methods: {
    updateImageSize() {
      const vm = this
      const image = new Image()
      image.src = this.image.url
      image.onload = function() {
          vm.imageSize = `${image.width}px`
        }
      }
    }
  }
})

nuxt/vue2 如何设置堆叠 div 的宽度以匹配堆叠中的特定 div

nuxt/vue2 how to set width of stacked divs to match a specific div in the stack

javascript

css

vue.js

nuxt.js