| | |
| | | <template> |
| | | <el-dialog v-model="dialogVisible" title="预览" width="100%" fullscreen align-center :before-close="handleClose" append-to-body> |
| | | <el-dialog v-model="dialogVisible" title="预览" :width="isImage ? '60%' : '100%'" :fullscreen="!isImage" align-center :before-close="handleClose" append-to-body> |
| | | <div> |
| | | <!-- 图片预览 --> |
| | | <div v-if="isImage"> |
| | | <div v-if="isImage" class="image-preview-container"> |
| | | <img :src="imgUrl" alt="Image Preview" /> |
| | | </div> |
| | | |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .image-preview-container { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | max-height: calc(100vh - 200px); |
| | | width: 100%; |
| | | } |
| | | |
| | | img { |
| | | max-width: 100%; |
| | | max-height: calc(100vh - 200px); |
| | | object-fit: contain; |
| | | display: block; |
| | | margin: 0 auto; |
| | | } |