时间戳

首页 > 解决方案 > v-img 的 Vuetify 动态高度

javascript - v-img 的 Vuetify 动态高度

问题描述

我有一个不是页面 100% 高度的容器，它是 80% 加上顶部和底部的 60px。所以里面的图片应该继承容器的高度。

使用<img />和一些 CSS 很容易实现，但我希望添加一个带有加载微调器的模板，所以我开始使用<v-img>它。

我可以看到我可以设置heightor max-height，所以我做了一个方法来计算父高度减去 120px 以获得确切的图像高度，并且它按预期工作。

问题是当用户调整窗口大小时，我可以看到要调用的方法并更新值，但 vuetify 元素不响应新值，因此图像大于或小于容器：

<div id="photoWrapper" class="photo-wrapper">
  <v-img
    :src="photo.url"
    :contain="true"
    :max-height="wrapperHeight()"
  >
    <template v-slot:placeholder>
      <v-layout fill-height align-center justify-center ma-0>
        <v-progress-circular
          indeterminate
          color="tertiary"
        ></v-progress-circular>
      </v-layout>
    </template>
  </v-img>
</div>

代码：

data() {
  return {
    mounted: false
  }
},
mounted() {
  this.mounted = true
  window.addEventListener('resize', this.wrapperHeight)
  this.wrapperHeight()
},
methods: {
  wrapperHeight() {
    if (!this.mounted) return
    console.log(document.getElementById('photoWrapper').offsetHeight - 120)
    const height = document.getElementById('photoWrapper').offsetHeight - 120
    return height
  }
}

该方法总是在屏幕调整大小时调用，但图像没有响应。我该怎么做？我还尝试将 移动wrapperHeight为计算属性。

标签： javascriptvue.jsvuetify.js

解决方案

我认为您必须${height}px在wrapperHeight方法中返回

推荐阅读