2020-09-03【element图片预览插件】

最新推荐文章于 2023-09-22 11:22:06 发布

良言SE

最新推荐文章于 2023-09-22 11:22:06 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/qq_32265719/article/details/108378715

版权

本文介绍了如何在不引用额外插件的情况下实现图片预览，特别提到了在el-dialog内的处理方式，需要通过设置z-index调整el-image-viewer组件的层级。另外，也讨论了使用Element UI内置图片预览插件时，可能需要考虑的项目中Element版本升级问题。

摘要由CSDN通过智能技术生成

无需引用插件版

如果el-image-viewer组件在el-dialog里面，el-dialog的层级是优先的，因此我们需要属性z-index去更改el-image-viewer组件样式的层级

<template>
    <div>
        <el-button @click="onPreview">预览</el-button>
        <!-- 图片查看器(兼容ie) -->
        <el-image
          ref="preview"
          class="hideImgDiv"
          :src="url"
          :preview-src-list="[url]"
          z-index