<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>
因为在dialog内,点击图片进行预览的时候最大范围就是dialog的范围
只需要给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