点击按钮(文字)调起elementUI大图预览

本文主要是介绍点击按钮(文字)调起elementUI大图预览，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

时隔一年，我又回来了 ~ 最近在做后台，遇到一个需求，就是点击“查看详情”按钮，调起elementUI的大图预览功能，预览多张图片，如下图：

首先想到的是使用element-ui的el-image组件，但它是通过点击图片来实现的，不太符合我们的需求，如果有这方面的需求可以去官网看一下；element大图预览官网实例

下面来说如何解决点击按钮预览多张图片(我写的项目最多就预览两张图片) ，使用el-image-viewer(图片查看器)；

html中代码：

<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" />
<el-button type="text" @click="onPreview(img)">查看详情</el-button>

// 两张这样写

<el-image-viewer

v-if="showViewer"

:on-close="closeViewer"

:url-list="[url1,url2]"

/>

js代码：

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';// 导入组件
export default {components: {ElImageViewer},data() {return {url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',showViewer: false, // 显示查看器}},methods(){// 点击按钮预览图片onPreview(img) {this.url = img;this.showViewer = true},// 关闭查看器closeViewer() {this.showViewer = false},}
}
</script>

看一下效果叭亲亲们~