elementui预览图片-Element Ui图像预览组件通过按下按钮触发图像预览

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

element ui的Image组件的大图预览需要点击一张图片才能触发大图预览elementui预览图片，那么如果我们不想点击小图来预览图片怎么办呢？

预览

先看DEMO

场景

项目中需要点击按钮向后台请求图片地址，然后预览大图

实施思路

我们可以将默认预览的小图替换为统一的图片，并提前放置到项目的静态文件中。

然后将图片定位在按钮上方，然后将图片的透明度设置为0，这样点击按钮就好像点击了按钮上方的小图片

第一步

我们先来实现一个表格样式

    

      
序号
      
订单号
      
操作
    
    

      
1
      
0356894598
      

        

          图片预览
          

            
            
          
        
      
    

添加一些样式

.img {
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: relative;
}
.demo-image__preview {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  cursor:pointer;
}
.demo-image__preview .el-image {
  width: 100%;
  height: 100%;
}

你会发现图片的小图片从文档中分离出来并覆盖在文字上方，然后我们给它添加一个透明度

.demo-image__preview {
 ..省略代码..
 ..省略代码..
 opacity: 0;
}

这样虽然点击文字是点击小图，达到混淆真实的效果，那么我们添加js

  data() {
    return {
      url:
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLMfiju_jWNy52oXUtPINHL9-PKyGJC6i01w&usqp=CAU",
      srcList: []
    };
  },
  methods: {
    async clickimg() {
      this.srcList = [
        (await this.getimgById(0)).src,
        (await this.getimgById(1)).src,
        (await this.getimgById(2)).src
      ];
    },
    getimgById(id) {
      let imglist = [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ];
      return new Promise((res) => {
        res({ src: imglist[id] });
      });
    }
  }

这里模拟了一个根据id请求图片的socket，可以自己替换。

你学会了吗？

不过有网友发现Elementui中的图片预览也是一个组件elementui预览图片，可以单独使用（目前在cdn下很难使用）

    

        预览
        {showViewer=false}"
             :url-list="imgList" />
    
    
    
    export default {
    name: 'Index',
    components: {
            'el-image-viewer':()=>import('element-ui/packages/image/src/image-viewer')
        },
    data() {
        return {
         showViewer: false,
         imgList:[ 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']
        }
    }