vue放大镜

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

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

### Build Setup 使用步骤 ###

# 安装 install
    npm install vue-piczoom --save

# 使用 use
    import PicZoom from 'vue-piczoom'
    export default {
      components: {
        PicZoom
      }
    }
    
    --html
    <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>

### Config 配置 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>props</strong></td> 
   <td><strong>describe</strong></td> 
   <td><strong>default</strong></td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>图片地址</td> 
   <td>string required</td> 
  </tr> 
  <tr> 
   <td>big-url</td> 
   <td>大图地址</td> 
   <td>string null</td> 
  </tr> 
  <tr> 
   <td>scale</td> 
   <td>图片放大倍数</td> 
   <td>number 2.5</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>放大时页面是否可滚动</td> 
   <td>boolean fasle</td> 
  </tr> 
 </tbody> 
</table>

### Suggest 注意事项 ###

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

<div class="pic-box"> 
         <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

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

相关阅读

相关 Vue放大镜 VuePhotoZoomPro

1.安装 npm install vue-photo-zoom-pro 2.引入 main.js import VuePhotoZoomPro...

小鱼儿/ 2024年04月17日 19:32/ 0 赞/ 23 阅读

相关 JS 图片放大镜

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

小灰灰/ 2023年01月09日 15:56/ 0 赞/ 175 阅读

相关商城图片放大镜

直接上主菜，代码注解详细，小白也能懂（一看就会） <!DOCTYPE html> <html> <head lang="en"> <

女爷i/ 2022年11月21日 11:37/ 0 赞/ 139 阅读

相关放大镜实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>放大镜

Bertha 。/ 2022年10月27日 05:27/ 0 赞/ 156 阅读

相关实现放大镜效果

1、布局文件 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http:

╰半夏微凉°/ 2022年08月19日 12:16/ 0 赞/ 250 阅读

相关 js简单放大镜

制作类似淘宝上面的放大镜，需要一张小图，一张大图。效果如下 ![Center][] <!DOCTYPE html> <html lang="en">

秒速五厘米/ 2022年06月09日 13:23/ 0 赞/ 206 阅读

相关商品放大镜

<!doctype html> <html> <head> <meta charset="utf-8">

小鱼儿/ 2022年05月18日 02:38/ 0 赞/ 228 阅读

相关 vue放大镜

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

╰+攻爆jí腚メ/ 2022年04月14日 02:22/ 0 赞/ 281 阅读

相关放大镜jQuery效果

今天我们来写一下jQuery的效果来上代码 1,html代码 1 <div id='small'><img src="./icon/images/sj1

向右看齐/ 2021年10月01日 03:30/ 0 赞/ 453 阅读

相关 react放大镜组件

放大镜效果图 ![放大镜效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

àì夳堔傛蜴生んèń/ 2021年09月21日 09:38/ 0 赞/ 579 阅读