vant UI 使用 ImagePreview 预览图片

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
          		});
        	}
		},
	},
}