vue+element-ui点击按钮实现图片全屏预览

最新推荐文章于 2024-04-02 20:16:54 发布

哪有那么可爱的小蝈蝈

最新推荐文章于 2024-04-02 20:16:54 发布

阅读量3.9k

点赞数 2

分类专栏： Vue JavaScript 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_46869765/article/details/115706002

版权

37 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述
点击随便一个自定义按钮实现图片全屏遮罩预览效果如下

按钮代码

<el-button icon="el-icon-full-screen" class="clicktobig" type="primary" @click="openViewer" />

利用element-ui中的el-image组件，使用el-image-viewer组件实现，组件代码如下

<el-image-viewer
        v-if="payVoucherDialog"
        :on-close="closeViewer"
        :url-list="previewImgList"
      />

使用时需要先引入组件，如果使用的是element-ui直接复制下面的引入代码到script标签就好

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

注册组件

components: { ElImageViewer },

在data中设置一个payVoucherDialog: true属性，用来控制开关全屏预览，还要设置一预览图的列表数组
在methods中添加开关函数:url-list=“previewImgList”

// // 点击全屏按钮打开图片预览
// openViewer() {
//   this.payVoucherDialog = true
// },
// // 关闭图片预览
// closeViewer() {
//   this.payVoucherDialog = false
// },

这就和el-image的点击图片放大预览的效果一致了

关注