时隔一年,我又回来了 ~ 最近在做后台,遇到一个需求,就是点击“查看详情”按钮,调起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>
看一下效果叭亲亲们~
就是这样子啦,完成啦 ,有问题留言(但我可能不太会哈哈哈哈哈),又是忙碌的一天,坐等下班~