Quasar Vue图片查看器全屏适配问题求助

别再用 q-dialog 嵌套 q-card 的思路了，q-card自带的内边距、边框样式会额外占用空间，很容易触发滚动条。用下面的方案可以实现无滚动条、全屏适配的图片查看器：

实现代码 #

模板部分 #

<template>
  <!-- 主卡片 -->
  <q-card>
    <q-img
      src="你的图片地址"
      @click="openImageViewer"
      style="cursor: pointer"
    />
    <!-- 其他卡片内容：数据、按钮... -->
  </q-card>

  <!-- 图片查看器 dialog -->
  <q-dialog
    v-model="viewerOpen"
    maximized
    class="image-viewer-dialog"
  >
    <q-img
      :src="currentImage"
      fit="contain"
      class="full-size-img"
    />
    <!-- 关闭按钮 -->
    <q-btn
      absolute
      top="16px"
      right="16px"
      icon="close"
      color="white"
      text-color="black"
      @click="viewerOpen = false"
    />
  </q-dialog>
</template>

脚本部分 #

<script setup>
import { ref } from 'vue'

const viewerOpen = ref(false)
const currentImage = ref('')

const openImageViewer = () => {
  currentImage.value = '你的图片地址' // 这里可以动态传入点击的图片地址
  viewerOpen.value = true
}
</script>

样式部分 #

<style scoped>
.image-viewer-dialog :deep(.q-dialog__content) {
  padding: 0; /* 去掉dialog默认的内边距 */
  overflow: hidden; /* 强制隐藏滚动条 */
}

.full-size-img {
  width: 100vw;
  height: 100vh;
}
</style>

关键说明 #

• maximized 属性让dialog直接占满视口，不用手动设置宽高
• fit="contain" 确保图片完整适配视口，不会被裁剪，也不会超出视口范围
• 去掉dialog内容区的默认padding，避免图片和边框之间的空隙引发滚动
• overflow: hidden 彻底禁用滚动条，即使极端情况也不会出现

内容的提问来源于stack exchange，提问作者juan noguera