VUE类淘宝放大镜组件-vue-piczoom使用

参考资料

1.安装

npm install vue-piczoom --save  
//or
npm install vue-piczoom --save --registry=https://registry.npm.taobao.org

2.使用代码示例

<template>
  <div class="main-img">
    <pic-zoom :scale="2" url="img/test/img.png"></pic-zoom>
  </div>
</template>
<script>
import PicZoom from 'vue-piczoom'
export default {
  components: {
    PicZoom
  }
}
</script>
<style scoped>
  .main-img{
    width: 600px;
    height: 555px;
  }
</style>
scale 为放大倍数。
当放大倍数为2时,效果图如下:

当放大倍数为5时,效果图如下:

big-url 为大图地址

倍数为2,url与big-url不同时,主要代码如下:

<pic-zoom :scale="2" url="img/test/img.png" big-url="img/test/big-img.png"></pic-zoom>
效果如下:

 

单独对组件设置小于外围div的宽时,代码和效果图如下:
<div class="main-img">
    <pic-zoom :scale="4" style="width: 200px;margin-top: -170px" url="img/test/img.png"></pic-zoom>
</div>
其中margin-top需要自行调整。

记录使用过的各种插件,快乐每一天。
发布了1 篇原创文章 · 获赞 0 · 访问量 159
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览