问题详情:在项目中,我们可能会碰到图片预览的功能需求,但是element中暴露出来的是el-image。它必须是点击图片才能够预览的,如果我们想点击文字进行预览图片呢?
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/acd81dae8f5ae985074b56296eb27186.png#pic_center)
解决办法:
<template>
<div>
<el-button @click="onPreview">预览</el-button>
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="[url]" />
</div>
</template>
<script>
// 导入组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
name: 'Index',
components: { ElImageViewer },
data() {
return {
showViewer: false, // 显示查看器
url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}
},
methods: {
onPreview() {
this.showViewer = true
},
// 关闭查看器
closeViewer() {
this.showViewer = false
}
}
</script>