(一)vue——商品放大镜组件封装和效果实现

前言

本节内容以vue为基础，实现一个商品放大镜组件的封装，及动画效果实现，通过本节内容，我们也可以实现其它h5相关的功能需求。商品放大镜功能在实际开发中还是有广泛需求的，尤其在商城项目中，为了更好的使用该功能，作者将该商品放大镜功能封装为一个组件，便于使用和维护。效果如下：

正文

• 创建一个商品放大镜的组件goods-magnifier-zoom.vue

•  封装商品放大镜组件

说明：

①通过注册鼠标的移入、移出、移动事件，实现商品放大镜的效果

1.  
   <div id="smallPic" @mouSEO（(Search Engine Optimization)）ver="handlerMouseOver" @mouseleave="handlerMouseLeave"
2.  
   @mousemove="handlerMouseMove">

②通过父子组件实现图片数据的传递

1.  
   props: {
2.  
   imgList: {
3.  
   type: Array,
4.  
   required: true,
5.  
   default: [],
6.  
   },
7.  
   },

③使用scss实现样式布局设置

<style scoped lang="scss">

④完整组件封装实现 

1.  
   <template>
2.  
   <div class="container">
3.  
   <div id="goodsZoom">
4.  
   <div id="zoomTop">
5.  
   <!-- 小图框-->
6.  
   <div id="smallPic" @mouSEO（(Search Engine Optimization)）ver="handlerMouseOver" @mouseleave="handlerMouseLeave"
7.  
   @mousemove="handlerMouseMove">
8.  
   <img :src="smallImgSrc">
9.  
   <!-- 蒙版元素-->
10.  
    <div id="mask" v-show="show"></div>
11.  
    </div>
12.  
    <!-- 大图框-->
13.  
    <div id="bigPic" v-show="show">
14.  
    <img :src="bigImgSrc" id="bigImg">
15.  
    </div>
16.  
    </div>
17.  
    <div id="zoomBottom">
18.  
    <a href="javascript:;" class="prev" @click="handlerPrev"> < </a>
19.  
    <div id="picList">
20.  
    <ul>
21.  
    <li v-for="(item,index) in imgList" @click="thumbnailClick(item)">
22.  
    <img :src="item.s">
23.  
    </li>
24.  
    </ul>
25.  
    </div>
26.  
    <a href="javascript:;" class="next" @click="handlerNext"> > </a>
27.  
    </div>
28.  
    </div>
29.  
    </div>
30.  
    </template>
31.  
     
32.  
    <script>
33.  
    export default {
34.  
    name: "goods-magnifier-zoom",
35.  
    props: {
36.  
    imgList: {
37.  
    type: Array,
38.  
    required: true,
39.  
    default: [],
40.  
    },
41.  
    },
42.  
    data() {
43.  
    return {
44.  
    show: false,//是否显示
45.  
    bigImgSrc: '',
46.  
    smallImgSrc: '',
47.  
    start: 0,
48.  
    }
49.  
    },
50.  
    created() {
51.  
    if (this.imgList.length > 0) {
52.  
    this.bigImgSrc = this.imgList[0].b;
53.  
    this.smallImgSrc = this.imgList[0].s;
54.  
    }
55.  
     
56.  
    },
57.  
    methods: {
58.  
    //鼠标移入事件
59.  
    handlerMouseOver() {
60.  
    this.show = true;
61.  
    },
62.  
    //鼠标移出事件
63.  
    handlerMouseLeave() {
64.  
    this.show = false;
65.  
    },
66.  
    //鼠标移动事件
67.  
    handlerMouseMove(data) {
68.  
    const smallPic = document.getElementById("smallPic");
69.  
    const bigPic = document.getElementById("bigPic");
70.  
    const bigImg = document.getElementById("bigImg");
71.  
    const zoomTop = document.getElementById("zoomTop");
72.  
    const mask = document.getElementById("mask");
73.  
    //蒙版边界设置
74.  
    let left = data.clientX - smallPic.getBoundingClientRect().left - mask.offsetWidth / 2;
75.  
    let top = data.clientY - smallPic.getBoundingClientRect().top - mask.offsetHeight / 2;
76.  
    //边界判断
77.  
    if (left < 0) {
78.  
    left = 0;
79.  
    } else if (left > smallPic.clientWidth - mask.offsetWidth) {
80.  
    left = smallPic.clientWidth - mask.offsetWidth;
81.  
    }
82.  
    if (top < -1) {
83.  
    top = -1;
84.  
    } else if (top > smallPic.clientHeight - mask.offsetHeight) {
85.  
    top = smallPic.clientHeight - mask.offsetHeight;
86.  
    }
87.  
    mask.style.left = left "px";
88.  
    mask.style.top = top "px";
89.  
    let scale = (smallPic.clientWidth - mask.offsetWidth) / (bigImg.offsetWidth - bigPic.clientWidth);
90.  
    console.log(scale);
91.  
    bigImg.style.left = -left / scale "px";
92.  
    bigImg.style.top = -top / scale "px";
93.  
    },
94.  
    //缩略图点击效果
95.  
    thumbnailClick(data) {
96.  
    this.bigImgSrc = data.b;
97.  
    this.smallImgSrc = data.s;
98.  
    },
99.  
    //点击前一个
100.  
     handlerPrev() {
101.  
     let ul = document.querySelector('#goodsZoom #zoomBottom #picList ul');
102.  
     let liNodes = document.querySelectorAll('#goodsZoom #zoomBottom #picList li');
103.  
     if (liNodes.length === 0) {
104.  
     return;
105.  
     }
106.  
     //步长
107.  
     let step = (liNodes[0].offsetWidth 20) * 2;
108.  
     this.start -= step;
109.  
     if (this.start < 0) {
110.  
     this.start = 0;
111.  
     }
112.  
     ul.style.left = -this.start "px";
113.  
     },
114.  
     //点击下一个
115.  
     handlerNext() {
116.  
     let ul = document.querySelector('#goodsZoom #zoomBottom #picList ul');
117.  
     let liNodes = document.querySelectorAll('#goodsZoom #zoomBottom #picList li');
118.  
     if (liNodes.length === 0) {
119.  
     return;
120.  
     }
121.  
     //步长
122.  
     let step = (liNodes[0].offsetWidth 20) * 2;
123.  
     //总体运动的距离值 = ul的宽度 - div框的宽度 = (图片的总数 - div中显示的数量) * （li的宽度 20）
124.  
     let endPosition = (liNodes.length - 5) * (liNodes[0].offsetWidth 20);
125.  
     this.start = step;
126.  
     if (this.start > endPosition) {
127.  
     this.start = endPosition;
128.  
     }
129.  
     ul.style.left = -this.start "px";
130.  
     },
131.  
     },
132.  
     };
133.  
     </script>
134.  
      
135.  
     <style scoped lang="scss">
136.  
     .container {
137.  
     margin: 5px 0 15px;
138.  
     overflow: hidden;
139.  
      
140.  
     #goodsZoom {
141.  
     #zoomTop {
142.  
     width: 400px;
143.  
     position: relative;
144.  
      
145.  
     #smallPic {
146.  
     width: 400px;
147.  
     height: 400px;
148.  
     border: 1px solid #dfdfdf;
149.  
     position: relative;
150.  
      
151.  
     img {
152.  
      
153.  
     }
154.  
      
155.  
     #mask {
156.  
     width: 200px;
157.  
     height: 200px;
158.  
     background: rgba(255, 255, 255, .5);
159.  
     border: 1px solid #ddd;
160.  
     position: absolute;
161.  
     left: 0px;
162.  
     top: -1px;
163.  
     }
164.  
     }
165.  
      
166.  
     #bigPic {
167.  
     width: 400px;
168.  
     height: 400px;
169.  
     border: 1px solid #ddd;
170.  
     left: 420px;
171.  
     top: 0px;
172.  
     position: absolute;
173.  
     overflow: hidden;
174.  
      
175.  
     #bigImg {
176.  
     width: 800px;
177.  
     height: 800px;
178.  
     position: absolute;
179.  
     left: 0px;
180.  
     top: 0px;
181.  
     }
182.  
     }
183.  
     }
184.  
      
185.  
     #zoomBottom {
186.  
     width: 400px;
187.  
     margin-top: 5px;
188.  
      
189.  
     a {
190.  
     width: 10px;
191.  
     height: 54px;
192.  
     border: 1px solid #ccc;
193.  
     background: #ebebeb;
194.  
     text-align: center;
195.  
     line-height: 54px;
196.  
     float: left;
197.  
     text-decoration: none;
198.  
      
199.  
     &:first-child {
200.  
     margin-right: 4px;
201.  
     }
202.  
     }
203.  
      
204.  
     #picList {
205.  
     width: 372px;
206.  
     height: 56px;
207.  
     float: left;
208.  
     overflow: hidden;
209.  
     position: relative;
210.  
      
211.  
     ul {
212.  
     white-space: nowrap;
213.  
     font-size: 0px;
214.  
     position: absolute;
215.  
     left: 0px;
216.  
     transition: 0.5s;
217.  
      
218.  
     li {
219.  
     width: 50px;
220.  
     height: 50px;
221.  
     border: 1px solid #ccc;
222.  
     padding: 2px;
223.  
     margin-right: 20px;
224.  
     display: inline-block;
225.  
      
226.  
     img {
227.  
     width: 50px;
228.  
     height: 50px;
229.  
     }
230.  
     }
231.  
     }
232.  
     }
233.  
     }
234.  
     }
235.  
     }
236.  
     </style>

• 创建一个测试页面GoodsZoom.vue，使用components引入组件 

①引入组件

1.  
   import goodsMagnifierZoom from '@/components/goods-magnifier-zoom.vue';
2.  
    
3.  
   export default {
4.  
   name: "GoodsZoom",
5.  
   components: {
6.  
   goodsMagnifierZoom: goodsMagnifierZoom,
7.  
   }
8.  
   }

②使用组件

<goods-magnifier-zoom :imgList="imgList"></goods-magnifier-zoom>

③完整代码实现

1.  
   <template>
2.  
   <div class="container">
3.  
   <div class="title">
4.  
   <span>商品放大镜</span>
5.  
   <el-divider direction="vertical"></el-divider>
6.  
   <router-link to="home">
7.  
   <span style="font-size: 18px;">退出</span>
8.  
   </router-link>
9.  
   </div>
10.  
    <el-divider>Test Staring</el-divider>
11.  
    <goods-magnifier-zoom :imgList="imgList"></goods-magnifier-zoom>
12.  
    </div>
13.  
    </template>
14.  
     
15.  
    <script>
16.  
    import goodsMagnifierZoom from '@/components/goods-magnifier-zoom.vue';
17.  
     
18.  
    export default {
19.  
    name: "GoodsZoom",
20.  
    data() {
21.  
    return {
22.  
    imgList: [
23.  
    {b: require('@/assets/nav/b1.png'), s: require('@/assets/nav/s1.png')},
24.  
    {b: require('@/assets/nav/b2.png'), s: require('@/assets/nav/s2.png')},
25.  
    {b: require('@/assets/nav/b3.png'), s: require('@/assets/nav/s3.png')},
26.  
    {b: require('@/assets/nav/b1.png'), s: require('@/assets/nav/s1.png')},
27.  
    {b: require('@/assets/nav/b2.png'), s: require('@/assets/nav/s2.png')},
28.  
    {b: require('@/assets/nav/b3.png'), s: require('@/assets/nav/s3.png')},
29.  
    {b: require('@/assets/nav/b1.png'), s: require('@/assets/nav/s1.png')},
30.  
    {b: require('@/assets/nav/b2.png'), s: require('@/assets/nav/s2.png')},
31.  
    {b: require('@/assets/nav/b3.png'), s: require('@/assets/nav/s3.png')},
32.  
    {b: require('@/assets/nav/b1.png'), s: require('@/assets/nav/s1.png')},
33.  
    {b: require('@/assets/nav/b2.png'), s: require('@/assets/nav/s2.png')},
34.  
    {b: require('@/assets/nav/b3.png'), s: require('@/assets/nav/s3.png')},
35.  
    {b: require('@/assets/nav/b1.png'), s: require('@/assets/nav/s1.png')},
36.  
    {b: require('@/assets/nav/b2.png'), s: require('@/assets/nav/s2.png')},
37.  
    {b: require('@/assets/nav/b3.png'), s: require('@/assets/nav/s3.png')}
38.  
    ],
39.  
    }
40.  
    },
41.  
    components: {
42.  
    goodsMagnifierZoom: goodsMagnifierZoom,
43.  
    }
44.  
    }
45.  
    </script>
46.  
     
47.  
    <style scoped lang="scss">
48.  
    .container {
49.  
    padding: 10px;
50.  
    overflow: hidden;
51.  
     
52.  
    .title {
53.  
    font-size: 20px;
54.  
    font-weight: bold;
55.  
    }
56.  
    }
57.  
     
58.  
    </style>

• 启动项目 
• 访问页面测试组件效果

①默认效果

 ②鼠标移入效果

③鼠标移动效果

④点击缩略图，切换商品

⑤切换缩略图

结语

至此，关于本节内容到这里就结束了，我们下期见。。。记得点赞、关注、收藏，你的支持就是我最大的创作动力。

这篇好文章是转载于：学新通技术网