解决el-image在el-dialog内预览展示不全

简介: 解决el-image在el-dialog内预览展示不全
<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

相关文章
|
6月前
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
270 0
|
前端开发
饿了么el-dialog自定义内容以及el-dialog自定义样式
饿了么el-dialog自定义内容以及el-dialog自定义样式
474 0
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
1949 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
458 0
|
3月前
|
前端开发
ElementUI——el-upload上传前校验图片宽高
ElementUI——el-upload上传前校验图片宽高
50 0
|
4月前
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
205 1
|
6月前
【UI】elementui select点击获取label 和 value
【UI】elementui select点击获取label 和 value
52 1
|
6月前
el-dialog中内容自定义滚动条
el-dialog中内容自定义滚动条
192 0