vant UI 使用 ImagePreview 预览图片

最新推荐文章于 2025-06-08 17:48:05 发布

搬砖了

最新推荐文章于 2025-06-08 17:48:05 发布

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： ui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_44590591/article/details/122945401

vue.js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Vant UI库的ImagePreview组件进行图片预览，包括安装步骤、局部引入和在data和methods中配置图片显示的方法。适合前端开发者学习Vant UI的使用。

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

vant UI 使用 ImagePreview 预览图片

通过 npm 安装

// Vue 3 项目，安装最新版 Vant
npm i vant

// Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

需要预览图片的页面使用

// 局部使用：
import Vue from 'vue';
import { ImagePreview } from 'vant';
Vue.use(ImagePreview);

export default {
	components: {
      ElImageViewer
    },
    data() {
		 return {
		 	ImagePreviewDialog: '',
		 }
	},
    methods: {
		handlePoto(url) {
			// imglist：数组类型
        	let imglist = []
          		imglist[0] = url
          		this.ImagePreviewDialog = ImagePreview({
            		images: imglist,
            		closeable: true
          		});
		},
		handlePoto1(url) {
			////判断是否为图片类型
        	let strImg = ''
       		strImg = url.substring(url.lastIndexOf('.') + 1).toLowerCase()
        	if (['png', 'jpeg', 'jpg'].indexOf(strImg) > -1) {
          		let imglist = []
          		imglist[0] = url
          		this.ImagePreviewDialog = ImagePreview({
            		images: imglist,
            		closeable: true
          		});
        	}
		},
	},
}