使用vue开发，图文页面，实现点击图片可以预览

最新推荐文章于 2025-04-08 16:45:43 发布

歌声缓缓

最新推荐文章于 2025-04-08 16:45:43 发布

阅读量2.5k

点赞数

分类专栏： JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43444977/article/details/128870955

版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

文章展示了如何在Vue项目中，利用Vant的ImagePreview组件来实现在APP新闻页面中点击图片预览大图的功能。通过监听窗口点击事件，检查被点击的目标是否为<img>标签，从而触发预览。代码示例中包含了组件的引入、挂载到Vue原型以及预览方法的编写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在某个有文字、图片、按钮等元素的页面，比如像各种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>