当前位置： 首页 > news >正文

Vue在移动端实现图片的手指缩放

news 文章来源：https://blog.csdn.net/qq_59626859/article/details/134008911 2025/5/18 1:47:52
使用V-View点击图片进行预览：
npm install v-viewer --save
在main.js进行引入

在图片下方会有 轮播箭头下一张上一张等，因此要用配置来关闭。    

import Viewer from 'v-viewer' // viewer.js一种图片预览处理工具
import 'viewerjs/dist/viewer.css' 
Vue.use(Viewer, {defaultOptions: {'zIndex': 9999,'inline': false, // 启用 inline 模式'button': true, // 显示右上角关闭按钮'navbar': true, // 显示缩略图导航 'title': false // 显示当前图片的标题}
})
使用方法：

这里是因为我的需求是直接点击图片触发，因此需要隐藏。

    <el-imagestyle="margin-bottom: 40px":src="stepSix"@click="tpDialogOpen(stepSix)"></el-image>tpDialogOpen会将图片地址传给v-view
   <viewer :images="[srcPrew]"><img id="myPrew" :src="srcPrew" style="width: 100%" v-show="hidden" /></viewer>

相关文章：

Vue在移动端实现图片的手指缩放

使用V-View点击图片进行预览&#xff1a; npm install v-viewer --save 在main.js进行引入 在图片下方会有 轮播箭头下一张上一张等&#xff0c;因此要用配置来关闭。 import Viewer from v-viewer // viewer.js一种图片预览处理工具 import viewerjs/dist/viewer.css …...

编程日记 2023/10/27 7:10:53

Failed to prepare the device for development

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…...

编程日记 2023/10/27 7:09:52

PPT文档图片设计素材资源下载站模板源码/织梦内核(带用户中心+VIP充值系统+安装教程)

源码简介&#xff1a; PPT文档图片设计素材资源下载站模板源码&#xff0c;作为织梦内核素材资源下载站源码&#xff0c;它自带了用户中心和VIP充值系统&#xff0c;也有安装教程。 织梦最新内核开发的模板&#xff0c;该模板属于素材下载、文档下载、图库下载、PPT下载、办公…...

编程日记 2023/10/27 7:08:51

万能鼠标设置 SteerMouse v5.6.8

鼠标可谓是用户们在使用电脑时候的必备外接设备呢&#xff01;适合你自己的鼠标设置也绝对能够优化你的Mac使用体验&#xff01;想要更好的Mac体验就试试用Steermouse Mac版吧。它通过软件来自由设置你的鼠标操作&#xff01;在这款万能鼠标设置工具中&#xff0c;用户可以在偏…...

编程日记 2023/10/27 7:06:49

16 用于NOMA IoT网络上行链路安全速率最大化的HAP和UAV协作框架

文章目录 摘要相关模型仿真实验仿真结果 摘要 优化无人机到HAP的信道分配、用户功率和无人机三维位置来研究上行安全传输解决非凸问题&#xff0c;采用K-means聚类算法&#xff0c;将成对的用户划分成不同的组&#xff0c;每个簇可以有相应的无人机服务&#xff0c;然后将构造…...

编程日记 2023/10/27 7:05:48

【C++】STL容器——vector类的使用指南(含代码演示)（11）

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一、vector类——基本介绍二、vector类…...

编程日记 2023/10/27 7:04:47

elementui 修改 el_table 表格颜色，表格下方多了一条线问题

解决&#xff1a; 加入以下代码 .el-table::before { z-index: inherit; } 如果使用了scoped&#xff0c;需要加上stylus /deep/ (其他的css语言有不一样的写法) 或是全局加入 body .el-table::before { z-index: inherit; } 其他背景色&#xff0c;表格边框颜色修改 //表头/de…...

编程日记 2023/10/27 7:03:46

阿里云/腾讯云国际站代理：阿里云服务器介绍

阿里云是由阿里巴巴集团旗下的云计算服务提供商。阿里云提供的服务包括云服务器、数据库服务、数据分析、人工智能、大数据、物联网等多种云计算产品和解决方案。阿里云的数据中心遍布全球多个地区&#xff0c;提供可靠且安全的云计算基础设施和服务。阿里云在中国以及全球范围…...

编程日记 2023/10/27 7:02:45

Go学习第十章——文件操作，Json和测试

Go文件操作&#xff0c;Json和测试 1 文件1.1 基本介绍1.2 读取的基本操作1.3 写入的基本操作1.4 使用案例(三个) 2 Go语言的Json使用2.1 序列化案例2.2 反序列化案例 3 单元测试3.1 先看个需求3.2 快速入门3.3 入门总结 1 文件 1.1 基本介绍 文件在程序中是以流的形式来操作…...

编程日记 2023/10/27 7:01:43

学习不同概率分布（二项分布、泊松分布等）概念及基础语法

概率分布是描述随机变量取值的概率情况的函数。常见的概率分布包括二项分布、泊松分布等。 二项分布&#xff08;Binomial Distribution&#xff09;&#xff1a;描述了一次试验中成功事件发生的次数的概率分布。它的基础语法如下&#xff1a; 概率质量函数&#xff1a;pmf(k, …...

编程日记 2023/10/27 7:00:42

在3台不联网的 CentOS 7.8 服务器上部署 Elasticsearch 6.8 集群

为了在3台不联网的 CentOS 7.8 服务器上部署 Elasticsearch 6.8.23 集群&#xff0c;并考虑到path.data和path.logs的配置&#xff0c;我们可以按照以下步骤进行操作&#xff1a; 1. 准备工作 1.1 从有网络的机器下载 Elasticsearch 6.8.23 的 RPM 包&#xff1a; https://w…...

编程日记 2023/10/27 6:59:41

CentOS 7

导入已有虚拟机 设置SSH免密登录 参考Ubuntu- 远程连接虚拟机&#xff08;桥连接&#xff09; 宿主机&#xff1a;Win10虚拟机&#xff1a;VMware保证宿主机和主机在同一个网段下&#xff08;宿主机和主机通过手机热点连接&#xff0c;在特定网段内&#xff0c;不能更改&#…...

编程日记 2023/10/27 6:58:41

个人记账理财软件 Money Pro mac中文版软件介绍

Money Pro for mac是一款综合性高的理财工具&#xff0c;Money Pro是一套能够协同工作的工具&#xff0c;可用来追踪账户、管理账单以及制作预算&#xff0c;您可以为每个时间段设置不同的预算限值。财务一切尽在掌控之中。 Money Pro for mac软件介绍 Money Pro for mac提供一…...

编程日记 2023/10/27 6:57:40

DSP 开发教程(0): 汇总

目录 DSP 开发教程(0): 汇总开发环境搭建DSP 开发例程 DSP 开发教程(0): 汇总 开发环境搭建 开发环境的搭建参考: Tronlong创龙 的博客. 安装 CCS v5.5 安装 BIOS_MCSDK DSP 开发例程 名称说明led_flash此例程实现在 EVM6678L 开发板控制 LED 闪烁. 使用了 SYS/BIOS 和 MC…...

编程日记 2023/10/27 6:56:39

YouTrack 中如何设置邮件通知

在 YouTrack 中&#xff0c;默认是不会邮件通知的。 你可以为你的账号设置邮件通知。 设置的方法为单击用户属性&#xff0c;然后在弹出的小窗口中选择属性选项。 设置邮件通知 在通知 Tab 页面中&#xff0c;选择发送邮件的方式&#xff0c;默认这个选项是不选择的。 用户…...

编程日记 2023/10/27 6:55:38

Prevalence and prevention of large language model use in crowd work

本文是LLM系列文章&#xff0c;针对《Prevalence and prevention of large language model use in crowd work》的翻译。 众包工作中使用大型语言模型的流行率和预防 摘要1 研究1&#xff1a;LLM使用的普遍率2 研究2&#xff1a;LLM使用的预防3 讨论4 材料与方法 摘要 我们表…...

编程日记 2023/10/27 6:54:37

微信小程序学习（02）

页面导航 - 声明式导航 1. 导航到 tabBar 页面 tabBar 页面指的是被配置为 tabBar 的页面。 在使用<navigator> 组件跳转到指定的 tabBar 页面时&#xff0c;需要指定 url 属性和 open-type 属性&#xff0c;其中&#xff1a; ⚫ url 表示要跳转的页面的地址&#xff0…...

编程日记 2023/10/27 6:53:36

Transit path

一、什么是Transit path "Transit" 路径通常指的是网络上的一种数据传输路线或路径&#xff0c;该路线用于在计算机网络中传递数据包。这个术语通常在网络和通信领域中使用&#xff0c;用于描述数据从一个地方传输到另一个地方的路线或路径。 在计算机网络中&#…...

编程日记 2023/10/27 6:52:35

backend-learning： personal blog（1）

问题记录&#xff1a; 跨度太大&#xff0c;无法完成&#xff0c;遂决定从基础学起。 规划路线&#xff1a; 1.完成JAVA与c语言差异部分&#xff0c;&#xff08;注解&#xff0c;其实没多少&#xff09; 2.上springboot官网查看开发手册&#xff0c;了解大致原理。 3. 开始挑…...

编程日记 2023/10/27 6:51:34

centos7系统下，实现1台服务器免密登录多台服务器功能

SSH案例&#xff1a;实现kafka01服务器能够免密登录kafka02和kafka03服务器的需求&#xff08;不然后面一键启动的脚本将无法使用&#xff09;⭐ 1&#xff1a;检查每台服务器是否都安装了SSH&#xff1a; [rootkafka01 ~]# rpm -qa |grep ssh openssh-clients-7.4p1-21.el7.…...

编程日记 2023/10/27 6:50:33

【力扣SQL】几个常见SQL题

【力扣SQL】184. 部门工资最高的员工 Employee&#xff1a;id&#xff08;主键&#xff09;、name、salary、departmentId&#xff08;外键&#xff09; Department&#xff1a;id&#xff08;主键&#xff09;、name 出每个部门中薪资最高的员工&#xff1a;Department.name、…...

编程日记 2023/10/27 6:49:32

[Python] ModuleNotFoundError: No module named ‘_ctypes‘

Python 找不到模块 此前遇到了 python 中的 _ctypes 模块丢失的问题&#xff0c;经排查发现是 Pyenv 安装的 python 确实缺少了此模块&#xff0c;后来使用 conda 安装 Python 发现 _ctypes.cpython-37m-x86_64-linux-gnu.so 此包存在。 排查方法是先全局查找相关模块&#xff…...

编程日记 2023/10/27 6:48:31

牛客网刷题-(5)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…...

编程日记 2023/10/27 6:47:30

springcloud gateway转发后getServerName被更改的问题

该问题起源于一次将代码移植到微服务产生。当使用springcloud gateway更换掉nginx网关后&#xff0c;出现无法登录的情况&#xff0c;跟进发现转发的信息里丢失了Host MimeHeaders accept */* knife4j-gateway-code ROOT content-type application/x-www-form-urlencoded …...

编程日记 2023/10/27 6:46:29

Linux - firewall-cmd 命令添加端口规则不生效排查

文章目录 linux 防火墙 firewall-cmd 命令详解问题排查 linux 防火墙 firewall-cmd 命令详解 基本语法 firewall-cmd --zonezone-name --add-serviceservice-name --permanent命令参数 --zone&#xff1a;指定要添加服务的区域名称。 --add-service&#xff1a;指定要添加的…...

编程日记 2023/10/27 6:45:28

iPhone手机屏幕分辨率

ios app测试时&#xff0c;需要测试应用在不同型号的苹果手机上的表现形式&#xff0c;可以自己在浏览器上配置。 代数设备逻辑像素尺寸缩放发布时间第一代iPhone 2G320 x 480480 x 3203.5寸1x2007年6月29日第二代iPhone 3320 x 480480 x 3203.5寸1x2008年7月11日第三代iPhone …...

编程日记 2023/10/27 6:44:27

文件包含漏洞(3),日志利用, 图片木马利用

日志利用, 图片木马利用 一, 利用服务器日志 通过普通的网络请求向日志文件注入代码, 再利用文件包含漏洞执行日志中的代码段. apache log: /opt/lampp/logs/access_log nginx log: /usr/local/nginx/logs/access.log 首先可以利用文件包含漏洞测试日志文件的内容是否可以显…...

编程日记 2023/10/27 6:43:27

java面试--线程总结

Java中有几种方式来创建线程执行任务&#xff0c;分别是什么&#xff1f; 1、继承Thread类 public class MyThread extends Thread{public static void main(String[] args) {MyThread myThread new MyThread();myThread.start();}Overridepublic void run() {System.out.pr…...

编程日记 2023/10/27 6:42:26

Angular-02:环境等说明

项目名不要带数字npm版本过低安装工具时加上版本号现项目完整的工具链&#xff1a;angular ngZorro rxjs ngrx sassvscode好用插件分享&#xff1a; 名称说明Auto Close Tag自动闭合html标签Auto Import自动引包&#xff08;可自动生成文件路径提示方便文件导入&#xff0…...

编程日记 2023/10/27 6:41:25

pgsql 分组查询，每组取10条

需求&#xff1a; 按照表的字段分组&#xff0c;然后每组取10条结果&#xff0c;返回即可 sql 如下&#xff1a; SELECT* FROM (SELECT chk_id,feature_id,task_id, ROW_NUMBER () OVER (PARTITION BY chk_id ORDER BY chk_id) AS row_num FROM ics_check_report WHERE task…...

编程日记 2023/10/27 6:40:24