vue项目elementUI预览图片

我不是女神ヾ 2022-12-28 07:16 834阅读 0赞

vue项目elementUI预览图片
说明：
1，elementUI组件中已经实现了图片预览，点击图片会有预览的功能
2，根据产品需求，要不展示图片，点击“图片预览按钮或链接”才显示图片的预览功能，如下图所示
在这里插入图片描述

在这里插入图片描述
如上图所示，只有点击 图片预览 按钮才会有图片预览的效果，实现方案如下：有两种方案：
第一种：使用ref进行操作
1，将el-image标签中渲染后的图片进行隐藏
2，使用ref进行操作，在el-image标签中声明ref属性
3，通过Element源码得知，预览图片组件中控制是否显示使用的属性是showViewer
4，将showViewer设置为true即可
主要代码如下：

  1. <el-image
  2.                                 class="my-img"
  3.                                 v-if="imageUrl"
  4.                                 ref="myImg"
  5.                                 :src="imageUrl"
  6.                                 :preview-src-list="srcList">
  7.                         </el-image>
  9.                     <div class="my-pre" @click="doPriveImg">
  10.                              图片预览
  11.                         </div>

图片预览请求的方法

  1. doPriveImg(){
  3.                 this.$refs.myImg.showViewer = true
  5.             },

css 样式

  1. <style lang="less">
  2.     .per-up{
  3.         position: relative;
  4.         .my-img{
  5.             width: 100px;
  6.             height: 100px;
  7.             .el-image__inner{
  8.                 visibility: hidden ;
  9.             }
  10.         }
  11.         .my-pre{
  12.             position: absolute;
  13.             margin-left: 111px;
  14.             margin-top: -156px;
  15.         }
  16.     }
  17. </style>

以上便是第一种方法，小编推荐使用第一种方法

第二种方法：操作dom元素，小编认为 不到万不得已就不要直接操作dom元素
1，通过调用 图片预览的方法 ，通过操作dom元素，直接触发image属性的click方法

  1. doPriveImg(){
  2.                 let dom = document.getElementsByClassName('el-image__preview')
  3.                 dom[0].click()
  4.             },

其他html代码和样式都和方法一 一样

发表评论

表情：
评论列表 （有 0 条评论，834人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue项目结构预览

        部分文件夹及文件作用如下： Build: 存放项目最终生成的文件 Config: 存放项目配置文件 node\_modules: npm install 生成

    清疚清疚/ 0 赞/ 355 阅读