实现功能
不展示具体图片,点击图片名称即调起图片预览组件(任意情况都可预览图片)
示例代码
主要思路:el-image组件样式设为display:none,不展示具体图片。等待需要预览时触发组件的预览操作。
<!-- 图片预览组件 -->
<el-image
style="display: none" //主要代码 样式需要设为display: none,但是这个组件还是会加载
ref="imageView"
:src="imageView.url"
:preview-src-list="imageView.srcList">
<template #placeholder>
</template>
</el-image>
/**
* @description: 预览图片方法
* @param {Array} srcList 待预览的图片路径数组 ['https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF']
* @return {*}
*/
imageViewHandle(srcList) {
this.imageView.url = srcList[0]
this.imageView.srcList = srcList
this.$nextTick(() => {
this.$refs.imageView.showViewer = true //主要代码 触发图片预览功能
})
}
elmentUI官网地址:Element - The world's most popular Vue UI framework