解决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

相关文章
|
开发框架 移动开发 Android开发
uniapp的几种跳转方式
uniapp的几种跳转方式
|
对象存储
关于uniapp解决单/多文件上传的解决思路
关于uniapp解决单/多文件上传的解决思路
1252 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
4390 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
开发工具 git
解决 VSCode 安装通义灵码后左侧菜单栏不显示按钮的问题
在 VSCode 中安装通义灵码插件后,若左侧活动栏未显示图标,可通过右键选中代码触发插件面板,并将其图标拖至左侧栏固定,便于后续快速使用。
5376 116
|
Java Spring
SpringBoot: 启动Banner在线生成工具
SpringBoot: 启动Banner在线生成工具
42309 1
SpringBoot: 启动Banner在线生成工具
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
2823 5
|
消息中间件 JSON Java
Spring Boot、Spring Cloud与Spring Cloud Alibaba版本对应关系
Spring Boot、Spring Cloud与Spring Cloud Alibaba版本对应关系
36886 1
|
编解码 JavaScript
【vue2】vue2 适配pc端,解决浏览器缩放问题,解决电脑显示设置缩放、分辨率问题
【vue2】vue2 适配pc端,解决浏览器缩放问题,解决电脑显示设置缩放、分辨率问题
2289 1
|
移动开发 小程序 JavaScript
uni-app多端应用开发:常见跨端兼容问题及处理策略
uni-app多端应用开发:常见跨端兼容问题及处理策略
1905 0
|
JavaScript API
vue使用Element-plus的Image预览时样式崩乱
vue使用Element-plus的Image预览时样式崩乱
730 0
vue使用Element-plus的Image预览时样式崩乱

热门文章

最新文章