图片预览(Element-ui)
需求描述:点击某个按钮预览当前图片(直接引入element-ui路径的预览组件,会直接导致ie报不兼容ES6的错误,建议拷贝组件和里面的依赖代码
直接将element-ui的图片预览源码拷贝出来,然后引入到项目中,实现图片预览功能
<template>
<div>
<el-button @click="onPreview">预览</el-button>
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="[url]"
/>
</div>
</template>
<script>
//方式一
// 导入组件 必须要导入的组件 直接从element里面导入
// import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
//方式二
// 也可以直接将image-viewer 直接提出来 放在组件中 引入到组件中使用
import ElImageViewer from '@/components/image/image-viewer'
export default {
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>
效果图如下: