您现在的位置是:网站首页> 编程资料编程资料
Vue vant使用ImagePreview实现预览图片_vue.js_
2023-05-24
408人已围观
简介 Vue vant使用ImagePreview实现预览图片_vue.js_
vant 使用 ImagePreview 预览图片
场景1
编列数组生成图片,点击预览图片
场景2
一个用字符串,用,分割为数组,编列数组生成图片,点击预览图片
效果图



图片预览正确的打开方式 vue-vant中ImagePreview
在使用vue的过程中,vant在移动端的地位还是很高的,本文简单介绍一下如何在自己项目中实现ImagePreview图片预览效果,获取图片索引,点击哪一张就预览哪一张
效果图如下

实现步骤,分为3步
1、局部注册ImagePreview
import { ImagePreview } from "vant";2、创建处理函数open,执行imagepreview函数
关键参数:图片数组、图片索引、是否可关闭

3、点击图片调用open函数预览效果

在vant中 ImagePreview 图片预览的详细参数请看这里点击查看更多喔!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- elementui中tabel组件的scope.$index的使用及说明_vue.js_
- TypeScript面向对象超详细分析_javascript技巧_
- vue中echarts自动轮播tooltip问题_vue.js_
- 基于Three.js实现酷炫3D地图效果_javascript技巧_
- axios中post请求json和application/x-www-form-urlencoded详解_vue.js_
- 前端HTTP发POST请求携带参数与后端接口接收参数的实现_javascript技巧_
- TypeScript接口使用介绍_javascript技巧_
- VUE学习之Element-ui文件上传实例详解_vue.js_
- TypeScript泛型使用详细介绍_javascript技巧_
- el-select如何获取下拉框选中label和value的值_vue.js_
