zoukankan      html  css  js  c++  java
  • [vue插件]基于vue2.x的电商图片放大镜插件

    最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下。小白第一次分享,各位大神莫见笑。

    vue-piczoom

    picture magnifier component for Vue.js 2.x
    基于vue2.x的电商图片放大镜插件

    GIF 动画截图

    Build Setup 使用步骤

    # 安装 install
    npm install vue-piczoom --save
    
    # 使用 use
    --script
    import PicZoom from 'vue-piczoom'
    export default {
      name: 'App',
      components: {
        PicZoom
      }
    }
    
    --html
    <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>
    

    Config 配置

    props describe default
    url 图片地址 string required
    big-url 大图地址 string null
    scale 图片放大倍数 number 2.5
    scroll 放大时页面是否可滚动 boolean fasle

    Suggest 注意事项

    组件默认是100%的高宽,所以建议将组件包含在一个有固定高宽的容器内。如:

    ``` <div class="pic-box"> <!--pic-box:500px;height:500px--> <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom> </div> ```

    Demo 示例

    在线示例

    Github

    Github

    update 更新记录

    1.0.4版本:(2018-01-22)

    1.更换算法,解决父级元素为position:relative时定位错误;
    2.优化边缘检测,解决放大选区移动至边缘时,放大移动失效;
    3.优化移动算法,移动选区更流畅;

    原文地址:https://segmentfault.com/a/1190000012917213

  • 相关阅读:
    YII2 Gridview 批量删除
    YII2 的复杂查询的一个例子
    Service.properties参数详解
    Kafka安装
    Zookeeper集群安装
    Kafka partition 副本迁移与broker上下线
    副本和分区状态机
    Controller机制
    replica副本同步机制
    Server端处理fetchRequest请求
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9958683.html
Copyright © 2011-2022 走看看