vant4实现图片放大预览

在这里插入图片描述
页面引入showImagePreview (展示一个全屏的图片预览组件)

	import { showImagePreview } from 'vant';

van-image 是用来展示的小图 点击小图 调用showImagePreview放大

	<van-cell v-if="img != null && img.length != 0" title="图片预览"></van-cell><div v-if="img != null && img.length != 0"><van-imagewidth="5rem"height="5rem"fit="cover"position="left"@click="imagePreview()":src="'data:image/jpg;base64,' + img"style="margin: 5px 5px 100px;"/></div>

img是在data里提前定义的 回显时用来存储base64

	// 预览imagePreview(){showImagePreview({images: ['data:image/jpg;base64,' + this.img],closeable: true,});},

上述方式是展示一张图

多图的就循环一下子 按以下方式

	 <van-cell v-if="img != null && img.length != 0" title="图片"></van-cell><div v-if="img != null && img.length != 0"><van-imagewidth="5rem"height="5rem"fit="cover"position="left"@click="imagePreview(index)":key="index"v-for="(item, index) in img":src="'data:image/jpg;base64,' + item"style="margin: 5px;"/></div>
	// 预览imagePreview(index){let imgAry = []this.img.forEach(item => {imgAry.push('data:image/jpg;base64,' + item)})showImagePreview({images: imgAry,closeable: true,startPosition: index,});},

startPosition 可以指定初始位置
showIndex 是否显示页码 默认是显示的
showIndicators 是否显示轮播指示器 默认不显示
closeable 是否显示关闭图标 默认不显示
closeIconPosition 关闭图标位置 可选值为 top-left bottom-left bottom-right 默认是top-right

另外还有个onClose 可以监听关闭事件

	howImagePreview({images: this.img,onClose() {showToast('关闭');},});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/763559.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

荒野大镖客2缺少emp.dll的多种解决方法分享,快速搞定游戏报错问题

在计算机游戏运行过程中&#xff0c;如果出现提示“游戏显示emp.dll丢失”的情况&#xff0c;这可能会引发一系列的问题与故障。首先&#xff0c;由于emp.dll是游戏运行所必需的重要动态链接库文件之一&#xff0c;它的缺失将直接影响到游戏程序的正常启动与执行。具体来说&…

搭建GItlab实现自动化部署Springboot项目(超详细)

提示&#xff1a;本例程中使用Docker搭建GItlab&#xff0c;Gitlab runner 通过编写CICD文件实现Springboot项目自动部署。 1、拉取GitLab镜像 命令&#xff1a; docker pull gitlab/gitlab-ce2、部署Gitlab&#xff1a; 我们通过docker搭建的gitlab部署项目的时候会出现一个…

Python Flask框架 -- 模版继承

一个网站中&#xff0c;大部分网页的模块是重复的&#xff0c;比如顶部的导航栏&#xff0c;底部的备案信息。如果在每个页面中都重复的去写这些代码&#xff0c;会让项目变得臃肿&#xff0c;提高后期维护成本。比较好的做法是&#xff0c;通过模板继承&#xff0c;把一些重复…

DP:斐波那契数列模型

创作不易&#xff0c;感谢三连支持 &#xff01; 斐波那契数列用于一维探索的单峰函数之中&#xff0c;用于求解最优值的方法。其主要优势为&#xff0c;在第一次迭代的时候求解两个函数值&#xff0c;之后每次迭代只需求解一次 。 一、第N个泰波那契数 . - 力扣&#xff08;…

[LLM] 大模型基础|预训练|有监督微调SFT | 推理

现在的大模型在进行预训练时大部分都采用了GPT的预训练任务&#xff0c;即 Next token prediction。 要理解大语言模型&#xff08;LLM&#xff09;&#xff0c;首先要理解它的本质&#xff0c;无论预训练、微调还是在推理阶段&#xff0c;核心都是next token prediction&#…

Wireshark 抓包工具与长ping工具pinginfoview使用,安装包

一、Wireshark使用 打开软件&#xff0c;选择以太网 1、时间设置时间显示格式 这个时间戳不易直观&#xff0c;我们修改 2、抓包使用的命令 1&#xff09;IP地址过滤 ip.addr192.168.1.114 //筛选出源IP或者目的IP地址是192.168.1.114的全部数据包。 ip.sr…

ideaSSM 工厂效能管理系统bootstrap开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 idea 开发 SSM 工厂效能管理系统是一套完善的信息管理系统&#xff0c;结合SSM框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff…

显卡基础知识及元器件原理分析

显卡应该算是是目前最为火热的研发方向了&#xff0c;其中的明星公司当属英伟达。 当地时间8月23日&#xff0c;英伟达发布截至7月30日的2024财年第二财季财报&#xff0c;营收和利润成倍增长&#xff0c;均超市场预期。 财报显示&#xff0c;第二财季英伟达营收为135.07 亿美…

leetcode 3075

leetcode 3075 题目 例子 思路 孩子的幸福值最低也是0&#xff0c;所以选择最大的值&#xff0c;被选孩子的幸福值最高。需要使用排序算法 代码实现 class Solution { public:long long maximumHappinessSum(vector<int>& happiness, int k) {//升序sort(happine…

基于SSM+Jsp+Mysql的高校二手交易平台

基于SSMJspMysql的高校二手交易平台 基于SSMJspMysql的高校二手交易平台的设计与实现 开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff0…

Robot Framework 入门指南:高效学习接口自动化测试

开源自动化测试利器&#xff1a;Robot Framework Robot Framework 是一个用于实现自动化测试和机器人流程自动化&#xff08;RPA&#xff09;的开放源代码框架。它由一个名为 Robot Framework Foundation 的组织得到推广&#xff0c;得到了多家领军企业在软件开发中的广泛应用…

移远通信,开启透明天线中的“创新密码”

近日&#xff0c;全球领先的物联网整体解决方案供应商移远通信正式对外宣布&#xff0c;其以远远领先行业的速度推出前沿技术成果——5G透明天线。该天线主体选用透明薄膜材质&#xff0c;具有性能优、重量轻、尺寸灵活、透明度高、环境融合度好等优势&#xff0c;特别适用于智…

处理器方法的返回值--返回对象Object

处理器方法也可以返回Object对象。这个Object可以是Integer&#xff0c;String&#xff0c;自定义对象&#xff0c; Map&#xff0c;List 等。但返回的对象不是作为逻辑视图出现的&#xff0c;而是作为直接在页面显示的数据出现的。 返回对象&#xff0c;需要使用ResponseBody注…

python第三次项目作业

打印课堂上图案 判断一个数是否是质数&#xff08;素数&#xff09; 设计一个程序&#xff0c;完成(英雄)商品的购买&#xff08;界面就是第一天打印的界面&#xff09; 展示商品信息(折扣)->输入商品价格->输入购买数量->提示付款 输入付款金额->打印购买小票&a…

九州家庭教育:关注孩子心理健康,增强亲子沟通

家庭教育现在越来越受重视&#xff0c;尤其孩子心理健康&#xff0c;当下社会&#xff0c;孩子心理健康问题频出&#xff0c;很多地方不时传出孩子轻生的新闻&#xff0c;这就是在教育过程中&#xff0c;沟通出现了严重问题&#xff0c;随着心理变化产生&#xff0c;孩子这时候…

FCN(全卷积神经网络)

目录 一、什么是FCN 1、FCN简介 2、核心思想 二、代码实现 1、FCN结构介绍 2、ResNet-18提取图像特征 3、11卷积层将通道数变换为类别个数 4、转置卷积还原输入图像的高和宽 5、初始化转置卷积层 6、读取数据集 7、训练 8、预测 三、总结 一、什么是FCN 1、FCN简介…

CSDN个人简介优化 html font属性

CSDN个人简介优化 html font属性 个人简介个人简介优化字体21种样式选择字体大小设置4号字体 字体颜色设计渐变色&#xff08;可惜不能显示&#xff09; 字体加粗设置 <b>标签 个人简介 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光…

Django日志(四)

一、Filters介绍 过滤器用于从logger传递给handler的哪些日志要做额外控制 默认情况下,满足日志级别的任何消息都将处理。只要级别匹配,任何日志消息都会被处理。不过,也可以通过添加 filter 来给日志处理的过程增加额外条件。例如,可以添加一个 filter 只允许某个特定来源…

产品说明书怎么制作?学会用模板事半功倍!

产品说明书常常被低估&#xff0c;但其实它是一个企业的名片&#xff0c;在阐述你的产品服务时大有作用。如果你在制作产品说明书上面花费大量的时间和精力&#xff0c;那么今天的文章可能会对你有所帮助。此文将会引领你了解如何制作产品说明书&#xff0c;以及推荐几款高效的…

Redis 不再“开源”,对中国的影响及应对方案

Redis 不再“开源”&#xff0c;使用双许可证 3 月 20 号&#xff0c;Redis 的 CEO Rowan Trollope 在官网上宣布了《Redis 采用双源许可证》的消息。他表示&#xff0c;今后 Redis 的所有新版本都将使用开源代码可用的许可证&#xff0c;不再使用 BSD 协议&#xff0c;而是采用…