Element-ui 官方文档中有大图预览相关组件 传送门:Element-ui 图片组件,但我们不想通过使用 Image 组件的方式(先默认显示预览图片,再通过点击图片实现大图预览查看),又想实现直接预览大图的功能是否可行呢?答案是当然可以。
使用el-image-viewer
template>
<div class="wrap">
<div class="content" @click="showImgViewer">打开</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList" />
</div>
</template>
<script>
export default {
data() {
return {
imgViewerVisible:false,
imgList:[
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
]
};
},
components:{
'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
},
methods: {
showImgViewer(){
this.imgViewerVisible = true;
const m = (e) => { e.preventDefault() };
document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", m, false); // 禁止页面滑动
},
closeImgViewer(){
this.imgViewerVisible = false;
const m = (e) => { e.preventDefault() };
document.body.style.overflow = 'auto';
document.removeEventListener("touchmove", m, true);
},
}
};
</script>
<style lang="scss" scoped>
.content{
width: 100%;
height: 1500px;
background: pink;
}
</style>
效果:
注: 有兴趣可以去github看看Element ui源码中 image-viewe。