在vue-cli使用
<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>
摘抄:https://www.cnblogs.com/zjianfei/p/15192619.html
由于el-image-viewer是一个单独的组件,我们在单页面无法使用 此组件,单页面使用方法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/vant/v2.12/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>标题</title>
<style>
* {
padding: 0;
margin: 0;
}
[v-cloak] {
display: none !important;
}
</style>
</head>
<body>
<div v-cloak id="Vue">
<el-image v-for="(item,index) in thankFileList" :key="index"
:src="item.img" @click="openPreview(index)"
:preview-src-list="thankFileListImage"></el-image>
</div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vant/v2.12/vant.min.js"></script>
<script>
new Vue({
el: "#Vue",
data: {
thankFileList:[],//展示图片数组
thankFileListImage: [],//预览图片数组
},
created() {
},
methods: {
openPreview(index){
this.thankFileListImage = this.thankFileList.slice(index).concat(this.thankFileList.slice(0, index))
}
}
})
</script>
</html>
点击按钮触发图片预览功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/vant/v2.12/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>标题</title>
<style>
* {
padding: 0;
margin: 0;
}
[v-cloak] {
display: none !important;
}
/* 隐藏el-image组件 */
.hideDiv>.el-image__inner {
display: none;
}
</style>
</head>
<body>
<div v-cloak id="Vue">
<div v-for="(item,index) in thankFileList" :key="index" @click="openPreview(index)">图片{{index}}</div>
<el-image
ref="preview" class="hideDiv" :src="hideImg"
:preview-src-list="thankFileListImage"></el-image>
</div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vant/v2.12/vant.min.js"></script>
<script>
new Vue({
el: "#Vue",
data: {
hideImg:"默认图片",
thankFileList:[],//展示图片数组
thankFileListImage: [],//预览图片数组
},
created() {
},
methods: {
openPreview(index){
this.thankFileListImage = this.thankFileList.slice(index).concat(this.thankFileList.slice(0, index))
//调用image组件中的大图浏览图片方法
this.$refs.preview.clickHandler();
}
}
})
</script>
</html>