<el-dialog
v-model="table.dialog"
title="计划审核"
:close-on-press-escape="false"
:close-on-click-modal="false"
:destroy-on-close="true"
@closed="handleClose"
>
<el-image
v-for="item in table.code_img"
:key="item"
style="width: 70px; height: 70px; margin: 0 10px 0 0"
:src="domain + item"
:zoom-rate="1.2"
:preview-src-list="[domain + item]"
:initial-index="4"
fit="cover"
/>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="">确定</el-button>
</span>
</template>
</el-dialog>
Because in the dialog, when you click on the picture to preview, the maximum range is the range of the dialog
Just add an attribute to el-image
<el-image
preview-teleported
v-for="item in table.thumb"
:key="item"
style="width: 70px; height: 70px; margin: 0 10px 0 0"
:src="domain + item"
:zoom-rate="1.2"
:preview-src-list="[domain + item]"
:initial-index="4"
fit="cover"
/>
preview-teleported