vue放大镜

╰+攻爆jí腚メ 2022-04-14 02:22 386阅读 0赞

最近有一个需求是要像淘宝商品详情页那样，分享一下。小白第一次分享，各位大神莫见笑。

Build Setup 使用步骤

  1. # 安装 install
  2. npm install vue-piczoom --save
  4. # 使用 use
  5. import PicZoom from 'vue-piczoom'
  6. export default {
  7.   components: {
  8.     PicZoom
  9.   }
  10. }
  12. --html
  13. <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%的高宽，所以建议将组件包含在一个有固定高宽的容器内。如：

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

发表评论

表情：
评论列表 （有 0 条评论，386人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JS 图片放大镜

      需求：             1.小遮罩可以随鼠标在小盒子上移动             2.遮罩层有自己的移动范围             3.鼠标在遮罩层的

    小灰灰小灰灰/ 0 赞/ 297 阅读

    相关 秒懂放大镜

    分析 1. 难点列出 1.鼠标在图片区域时，透明小区域出现，放大的区域出现 2.鼠标移出图片时，透明小区域小时，放大区域消失 3.透

    蔚落蔚落/ 0 赞/ 296 阅读

    相关 vue放大镜

    最近有一个需求是要像淘宝商品详情页那样，分享一下。小白第一次分享，各位大神莫见笑。 Build Setup 使用步骤 安装 install npm i

    ╰+攻爆jí腚メ╰+攻爆jí腚メ/ 0 赞/ 387 阅读