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" class="small-img" :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 lang="scss">
.preview-dialog {
  display: flex;
  flex-direction: column;
  .el-dialog__body {
    flex: 1;
    padding: 2px !important;
    .preview-content {
      width: 100%;
      height: 100%;
    }
  }
  .el-dialog__footer {
    padding: 0 !important;
  }
}
</style>
<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);
    // height: 50vh;
    // width: 300px;
    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;
      height: auto;
      object-fit: contain;
    }
  }
}
</style>