开箱即用的vue图片放大镜

一个巨蟹座的前端

已于 2024-01-02 17:38:35 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js 文章标签： vue.js javascript 前端

于 2021-12-06 16:33:07 首次发布

本文链接：https://blog.csdn.net/weixin_47813845/article/details/121749754

vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

24 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vue-piczoom插件实现图片放大镜功能。通过安装、注册组件以及配置参数，展示了图片放大、页面滚动及旋转图片等特性。虽然在使用过程中发现show-edit属性无效，但官网案例正常，期待读者分享解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天发现了一个图片放大镜插件，故来记录一下。

先来给大家看下效果：

1.安装插件

yarn add vue-piczoom

2.在项目中引入(要在components里面注册的)

<script>
import PicZoom from 'vue-piczoom'
export default {
  name: "index",
  components: {   PicZoom },

};

3.在模板中使用

<template>
  <div>
    <div style="width: 400px; height: 400px">
      <picZoom
        url="https://img0.baidu.com/it/u=167913364,4100310431&fm=26&fmt=auto"
      ></picZoom>
    </div>
    <div></div>
  </div>
</template>

4.最后给大家看下常用参数

参数	描述	默认值
url	图片地址	string required
big-url	大图地址	string null
scale	图片放大倍数	number
scroll	图片放大时页面是否可滚动	boolean false
show-edit	是否显示旋转图片按钮	Boolean false