根据断点设置图像高度

debugcn 发表于 Dev

Question3r

Vuetify的图像组件（https://vuetifyjs.com/en/components/images/）提供了一个height道具。如何根据当前断点保持该高度变量？拥有这样的东西会很好

<v-img 
  :height="img.height.xs" 
  :sm="img.height.sm"
  :md="img.height.md"
  :lg="img.height.lg"
  :xl="img.height.xl">
</v-img>

我必须使用计算所得的属性来执行此操作，还是只能通过HTML来解决它？通过这种方式，我的意思是我正在寻找类似TailwindCSS方法的解决方案（https://tailwindcss.com/docs/height/#sensitive）

<div class="h-8 sm:h-12 md:h-16 lg:h-20 xl:h-24"></div>

我出于示例目的创建了一个代码段

https://codepen.io/dsm98861/pen/qBbXomN?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fcards%2F

梦游者

Vuetify具有自己的预定义和可覆盖断点。

我认为，解决问题的最正确方法是使用计算道具。根据您的Codepen，应该是这样的：

<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="400"
    >
      <v-img
        class="white--text align-end"
        src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
        :height="imageHeight"
      ></v-img>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  computed: {
      imageHeight () {
        switch (this.$vuetify.breakpoint.name) {
          case 'xs': return '200px'
          case 'sm': return '400px'
          case 'md': return '600px'
          case 'lg': return '800px'
          case 'xl': return '1000px'
        }
      },
    }
})

如果您真的想仅使用HTML来解决它，则可以通过以下方式设置height属性：

<v-img
    class="white--text align-end"
    src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
    :height="$vuetify.breakpoint.xs 
                ? '200px' 
                : ($vuetify.breakpoint.sm
                    ? '400px' 
                    : ($vuetify.breakpoint.md
                        ? '600px'
                        : ($vuetify.breakpoint.lg
                            ? '800px' 
                            : '1000px'
                        )
                    )
                )"
></v-img>

阅读有关Vuetify docs中的断点的文章后，您也许可以提出一个更优雅，更合适的解决方案。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。