vue elementui实现点击按钮预览图片

前端 潘老师 1个月前 (01-25) 41 ℃ (0) 扫码查看

vue elementui如何实现点击按钮预览图片呢?我们一起来学习下吧!

在elementui官网只看到el-image 组件可以实现图片预览功能,但是有个缺点就是它会默认显示小图片,然后当你点击小图片时才会弹出预览的大图片,代码如下:

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>

<script>
  export default {
    data() {
      return {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }
</script>

但是现在我们要的效果点击一个button按,就指直接弹出该图片的预览效果,实现方法如下:

第一步:导入image-viewer组件

导入代码如下:

import elImageViewer from 'element-ui/packages/image/src/image-viewer'

第二步:准备两个变量

注册该组件,然后我们再需要准备两个变量,分别存放是否显示图片预览和当前预览的图片列表:

components: { elImageViewer },
data() {
    return {
        showImageViewer: false, // 实现显示图片预览
        currentImageList: [], // 当前预览图片列表
    }
}

第三步:准备一个查看图片button按钮和图片预览的区域

查看图片按钮

<el-button size="mini" type="primary" @click="showImage('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')">查看图片</el-button>

图片预览:

<!-- 查看图片预览-->
<elImageViewer
      v-if="showImageViewer"
      :on-close="()=>{showImageViewer = false}"
      :url-list="currentImageList">
</elImageViewer>

 第四步:实现查看图片方法

最后我们实现查看图片的showImage方法:

// 查看图片
showImage(url) {
    this.currentImageList[0] = url
    this.showImageViewer = true
},

到此就结束了,当你点击查看图片按钮后就会直接显示图片预览的效果了,以上就是vue elementui实现点击按钮预览图片全部内容,希望对你有帮助!欢迎持续关注潘子夜个人博客(https://www.panziye.com),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12774.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】