element+vue 之图片放大器

在这里插入图片描述

1.安装插件

npm install vue-photo-zoom-pro

2.main.js导入

// 放大镜
import VuePhotoZoomPro from 'vue-photo-zoom-pro'
Vue.use(VuePhotoZoomPro)

3.页面使用

     <vue-photo-zoom-pro:url="imgUrl":out-zoomer="true":scale="2"style="width: 368px; height: 368px; margin-right: 30px"><template slot="zoomer"><div class="ks-imagezoom-wrap"/></template></vue-photo-zoom-pro><div style="width: 368px; margin-top: 10px"><el-carouseltype="card"height="70px":autoplay="false"indicator-position="none"@change="changeImg"><el-carousel-itemv-for="(item, index) in imgList":key="index"style="text-align: center"><img width="70px" height="70px" :src="item"/></el-carousel-item></el-carousel></div>changeImg(val) {this.imgUrl = this.imgList[val];},```![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c0d67199084d4817a41529e5abee6129.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/fdc3879fce774218b1191f5f13e06fc5.png)

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

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

相关文章

Leetcode202快乐数(java实现)

今天分享的题目是快乐数&#xff1a; 快乐数的定义如下&#xff1a; 快乐数&#xff08;Happy Number&#xff09;是指一个正整数&#xff0c;将其替换为各个位上数字的平方和&#xff0c;重复这个过程直到最后得到的结果为1&#xff0c;或者无限循环但不包含1。如果最终结果为…

使用ElementUI的el-tab+vxe-table表格+复选框选择

效果&#xff1a; 功能&#xff1a;首先进来是全部清空的状态的 点击左边选择不同项右边会实时发送接口获取数据填充表格 复选的内容可以保留显示&#xff0c;比如A的1勾选后切换到B再切换回来A的1仍然是勾选状态 说实话官网的setCheckboxRow方法我实现不了&#xff0c;这里…

2024年华夏银行总行社会招聘公告

信息科技部自动化测试与开发类岗  工作地点&#xff1a;北京市 学历要求&#xff1a;本科及以上 工作职责 1、持续推进自动化测试的开展&#xff0c;提升自动化测试覆盖率,包括方案设计、测试分析、测试执行和总结等。 2、负责自动化测试工具和框架搭建&#xff0c;根据…

C语言实现单向循环链表

1.C语言实现 #include <stdio.h> #include <stdlib.h> #include <stdbool.h> // 定义一个节点类 typedef struct Node {int data;// 数据域struct Node* next;// 指针域 }Node; // 定义初始化链表方法 Node* initList() {Node* list (Node*)malloc(sizeof(…

【数据库原理】(26)数据库并发控制

并发控制是数据库管理系统&#xff08;DBMS&#xff09;的核心功能之一。它确保在多个用户并行访问数据库时&#xff0c;数据库的一致性和完整性得到维护。 一.事务概述 1. 事务的定义 事务是数据库中基本的逻辑工作单位&#xff0c;由一系列操作组成&#xff0c;这些操作要…

CSAPP阅读笔记-信息的表示和处理

信息的表示和处理 包括整数、浮点数的存储格式、计算中可能存在的问题等 信息存储 大多数计算机使用8位的块&#xff0c;或者字节(byte)&#xff0c;作为最小的可寻址的内存单位&#xff0c;而不是访问内存中单独的位。机器级程序将内存视为一个非常大的字节数组&#xff0c…

java实现调用http请求的几种常见方式

概述 在实际开发过程中&#xff0c;我们经常需要调用对方提供的接口或测试自己写的接口是否合适。 很多项目都会封装规定好本身项目的接口规范&#xff0c;所以大多数需要去调用对方提供的接口或第三方接口&#xff08;短信、天气等&#xff09;。 在Java项目中调用第三方接口…

fisco-bcos部署pro生产版本

我这里使用的 Ubuntu20.4系统&#xff0c;linux系统把操作命令apt改为yum即可 升级安装包 apt-get update 安装jdk&#xff0c;我这里使用jdk17 apt -y install openjdk-17-jdk-headless 查看java版本 java -version 安装依赖 apt-get install -y curl docker.io docker-com…

Linux从入门到精通(第14章 传输文件)

如何在Ubuntu上安装配置NFS_ubuntu 安装nfs-CSDN博客 遇到某些问题&#xff1a; 1、无权限更改文件&#xff1a;sudo -s 2、sudo ifconfig无法识别&#xff1a;sudo apt-get install net-tools 最后的效果是&#xff1a; 在服务端的机器上&#xff1a;rootsword:/nfs_shar…

【Databend】行列转化:一行变多行和简单分列

文章目录 数据准备和需求生成序列和分隔函数根据分隔符变多行JSON 数据简单分列总结 数据准备和需求 行列转化在实际工作中很常见&#xff0c;其中最常见的有一行变多行&#xff0c;有下面一份数据&#xff1a; drop table if exists fact_suject_data; create table if not …

基于SSM+JSP的订餐管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

金融疆界:在线支付系统渠道网关的创新设计(一)

这是《百图解码支付系统设计与实现》专栏系列文章中的第&#xff08;11.1&#xff09;篇。点击上方关注&#xff0c;深入了解支付系统的方方面面。 整个渠道网关的内容预计会分成5篇来讲&#xff1a;1&#xff09;定位、术语、概要设计。2&#xff09;领域模型、状态机设计。3…

数据结构第十三弹---链式二叉树基本操作(上)

链式二叉树 1、结构定义2、手动创建二叉树3、前序遍历4、中序遍历5、后序遍历6、层序遍历7、计算结点个数8、计算叶子结点个数9、计算第K层结点个数10、计算树的最大深度总结 1、结构定义 实现一个数据结构少不了数据的定义&#xff0c;所以第一步需要定义二叉树的机构。 typ…

学习笔记-mysql基础(DDL,DML,DQL)

一.DDL DDL,Data Definition Language,数据库定义语言,该语言包括以下内容: 对数据库的常用操作对表结构的常用操作修改表结构 1.对数据库的常用操作 -- 查看所有的数据库 show databases -- 创建数据库 create database [if not exists] test [charsetutf8] -- 切换 选择 …

__declspec (dllexport)定义了导出函数,但dll中没有此函数

这个一个比较低级的问题&#xff0c;为避免两次犯这样的低级错误&#xff0c;特此记录。 发生这个问题的原因是未包含头文件&#xff0c;例如&#xff1a; test.h //在头文件中声明了导出函数test() #ifdef __cplusplus extern "C" { #endif /*__cplusplus 1*/ext…

记录汇川:H5U与Factory IO测试12

主程序&#xff1a; 子程序&#xff1a; IO映射 子程序&#xff1a; 辅助出料 子程序&#xff1a; 自动程序 Factory IO配置&#xff1a; 实际动作如下&#xff1a; Factory IO测试12

基于SSM的仓库在线管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

20-链表-删除链表中的节点

这是链表的第20题&#xff0c;力扣链接。 有一个单链表的 head&#xff0c;我们想删除它其中的一个节点 node。 给你一个需要删除的节点 node 。你将 无法访问 第一个节点 head。 链表的所有值都是 唯一的&#xff0c;并且保证给定的节点 node 不是链表中的最后一个节点。 删除…

ubuntu程序性能分析

文章目录 timeperfvalgrindubuntu 重复执行命令 在Ubuntu上&#xff0c;可以使用一些工具来测量两段程序的计算量&#xff0c;如下所示&#xff1a; time time命令&#xff1a;time命令可以用于测量程序的执行时间。在终端中运行以下命令来执行程序并测量其执行时间&#xff1…

支持向量机(公式推导+举例应用)

文章目录 引言间隔与支持向量机对偶问题&#xff08;拉格朗日乘子法&#xff09;SMO算法核函数软间隔与正则化软间隔正则化&#xff08;罚函数法&#xff09; 模型的稀疏性结论实验分析 引言 在机器学习领域&#xff0c;支持向量机&#xff08;Support Vector Machine&#xf…