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

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

点击随便一个自定义按钮实现图片全屏遮罩预览效果如下

按钮代码

<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的点击图片放大预览的效果一致了

最后

以上就是热情鸡翅为你收集整理的vue+element-ui点击按钮实现图片全屏预览的全部内容，希望文章能够帮你解决vue+element-ui点击按钮实现图片全屏预览所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。