Vue - 图片放大镜（vue-piczoom）

原创已于 2022-06-28 15:50:08 修改 · 3.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

于 2020-10-28 14:52:15 首次发布

Vue__插件、依赖的使用专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何利用vue-piczoom插件实现网页中图片放大的功能。通过npm安装该插件并将其引入到Vue项目中，设置好必要的属性如图片路径、放大倍数等，即可实现交互式的图片放大效果。

vue-piczoom：https://www.npmjs.com/package/vue-piczoom/v/1.0.6

使用图片放大镜插件 vue-piczoom

安装
npm install vue-piczoom --save

使用

<template>
  <div class="wrap">
    <!-- 组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内 -->
    <div style="width: 500px; height: 500px">
      <!-- 第三步：标签使用 -->
      <pic-zoom url="/static/img/1.jpg" :scale="3"></pic-zoom>
    </div>
  </div>
</template>
<script>
// 第一步：引入vue-piczoom
import PicZoom from "vue-piczoom";
export default {
  // 第二部：注册组件
  components: {
    PicZoom,
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
</style>

Config 配置

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