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

演示https://826327700.github.io/vue-piczoom/dist/

1.安装
npm install vue-piczoom --save
2. 使用

<template>
  <div class="wrap">
    <!-- 组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内 -->
    <div style="width: 500px; height: 500px">
      <!-- 第三步：标签使用 -->
     <!--  :scale 当属性被v-bind修饰时 里面内容为js :scale ="3" 3是数字类型 
      scale ="3" 3是字符串类型 -->
      <pic-zoom url="https://static01.imgkr.com/temp/bd2fb06a0a8f4576bcc6d19841de1533.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>

3. Config 配置