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

插件地址 vue-piczoom

1.安装

npm install vue-piczoom -S

2.在组件内使用

<template>
    <div style="width: 400px;height: 400px">
      <pic-zoom url="../../static/img/photo-da/photo_rule.png" :scale="1.5"></pic-zoom>
    </div>
    <div>
    </div>
</template>

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

<style scoped>

</style>

3.Config配置

4.注意事项
组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内。

<div style="width: 400px;height: 400px">
      <pic-zoom url="../../static/img/photo-da/photo_rule.png" :scale="1.5"></pic-zoom>
</div>