marking-cet-web/src/components/shared/ImagePreview.vue

<template>
  <base-dialog
    v-model="visible"
    less
    title="试卷预览"
    :can-resize="'can-resize2'"
    :modal="false"
    class="preview-dialog"
  >
    <div class="preview-content" :class="{ 'is-big': isBig }">
      <img v-show="!!url" :src="url" alt="" />
    </div>
  </base-dialog>
</template>

<script setup lang="ts" name="ImagePreview">
import BaseDialog from '../element/BaseDialog.vue'
import useVModel from '@/hooks/useVModel'

const props = defineProps<{
  modelValue: boolean
  url?: string
  isBig?: boolean
}>()
const visible = useVModel(props)
</script>

<style scoped lang="scss">
.preview-dialog {
  margin-left: 70%;
  .preview-content {
    width: 100%;
    min-width: 250px;
    // max-width: 400px;
    text-align: center;
    min-height: 40vh;
    // max-height: 600px;
    // max-height: calc(50vh - 50px);
    overflow: auto;
    &.is-big {
      max-width: 50vw;
      height: calc(100vh - 50px);
      img {
        width: auto;
        height: 99%;
      }
    }
    img {
      // width: 100%;
      // height: 100%;
      height: calc(50vh - 50px);
      width: auto;
      object-fit: contain;
    }
  }
}
</style>