学校网站建设小组及分工做优化网站

时隔一年，我又回来了 ~ 最近在做后台，遇到一个需求，就是点击“查看详情”按钮，调起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>

 看一下效果叭亲亲们~

就是这样子啦，完成啦 ，有问题留言（但我可能不太会哈哈哈哈哈），又是忙碌的一天，坐等下班~