在某个有文字、图片、按钮等元素的页面,比如像各种APP的新闻页面,其中,实现用户点击图片可以预览图片,点击其它元素不会预览。
使用 vant 的 ImagePreview 组件实现预览图片
实现效果如下图:
main.js 引入 ImagePreview
import {ImagePreview } from 'vant';
Vue.use(ImagePreview)
Vue.prototype.$ImagePreview=ImagePreview
在开发页面.vue文件开发
图片是我本地文件
(提供一个在线图片地址:https://img01.yzcdn.cn/vant/apple-1.jpg)
<template>
<div class="wrap">
asdfasdfasdfasdfasdf
<img src="../../assets/img/balloon.png" width="250px" height="250px">
<img src="../../assets/img/env.png" width="100px" height="200px">
</div>
</template>
<script>
export default {
name: "index",
data(){
return{
url:''
}
},
mounted(){
window.addEventListener('click',(res)=>{
console.log(res.target.nodeName)
if(res.target.nodeName=='IMG'){
this.url=res.srcElement.currentSrc
this.preview()
}
})
},
methods:{
preview(){
setTimeout(()=>{
this.$ImagePreview({images:[this.url],showIndex:false})
},200)
}
}
}
</script>
<style scoped>
.wrap{
width: 100%;
height: 100vh;
}
</style>