11前端项目总结----详情页放大镜和轮播图

DOM元素尺寸和位置相关属性

1. 尺寸相关属性

①offsetWidth/offsetHeight：内容宽度/高度+padding+border+（滚动条）
②clientWidth/clientHeight：内容宽度/高度+padding
③scrollWidth/scrollHeight：只包含内容宽度/高度（包括被隐藏部分）

2.位置相关属性

• 相对父元素
  - offsetParent:最近的定位祖先元素（position不为static）
  - offsetLeft/offsetTop:元素相对offsetParent的左上角位置
• 相对视口
  - getBoundingClientRect():返回元素相对于视口的位置和尺寸信息
• 滚动相关
  - scrollLeft/scrollTop:元素内容向左/上滚动的像素数

3.鼠标事件相关位置属性

• 相对于元素
  - offsetX/offsetY:鼠标相对于目标元素边界的坐标
• 相对于浏览器视口
  - clientX/clientY:鼠标相对于浏览器视口的坐标
• 相对于整个文档
  - pageX/pageY:鼠标相对于整个文档的坐标（包含滚动距离）

放大镜

通过鼠标移动位置改变蒙版位置，首先要知道DOM元素一些尺寸、位置属性以及鼠标事件的相关位置属性

<template><div class="spec-preview"><!--主图--><img src="../images/s1.png" /><!--事件  鼠标移动--><div class="event" @mouseover="handler"></div><!--放大镜--><div class="big" ref="big"><img src="../images/s1.png" /></div><!--绿色蒙版--><div class="mask" ref="mask"></div></div>
</template>

蒙版跟随鼠标移动。handler默认参数event，记录鼠标的移动参数

methods:{handler(event){let mask = this.$refs.mask;let big = this.$refs.big;//蒙版距离图片的距离let left = event.offsetX-mask.offsetWidth/2;let top = event.offsetY-mask.offsetheight/2;//left和top可能为负数if(left<=0) left=0;if(left>=mask.offsetWidth) left=mask.offsetWidth;if(top<=0) top = 0;if(top>=mask.offsetHeight) left=mask.offsetHeight;//修改元素的样式left/top属性值:注意加上pxmask.style.left = left+'px';mask.style.top = top+'px';//big是蒙版mask的两倍，那么big大图移动的距离也是两倍//big的移动方向和mask相反所以是负数big.stye.left = -2*left+'px';big.style.top = -2*top+'px';}
}

排他

项目中：产品的属性名和属性值，如颜色、版本选择，选择其中一个属性的属性值，就会产生高亮效果

解释一下：saleAttrList:Array[]，数组里面是商品属性saleAttr，属性是个对象{}，对象里面有属性名saleAttrName，和属性值数组形式的saleAttrValueList,数组里面是对象形式，遍历数组可得到每个对象的saleAttrValueName属性值

<div><!--商品属性 属性值--><dl v-for="saleAttr in saleAttrList" :key="saleAttr.id"><dt>{{saleAttr.saleAttrName}}</dt><dd :class="{active: saleAttrValue.isChecked==1}" v-for="saleAttrValue in saleAttr.saleAttrValueList" :key="saleAttrValue.id" @click="changeActive(saleAttrValue,saleAttr.saleAttrValueList)">{{saleAttrValue.saleAttrValueName}}</dd></dl>
</div>

绑定的@click="changeActive(saleAttrValue,saleAttr.saleAttrValueList)需要传入点击的属性值value和该属性的saleAttrValueList数组

methods:{changeActive(clickedValue,valueArr){//valueArr中除了cickedValue，其余的isCheck赋值为0valueArr.forEach(item=>{item.isChecked = 0;});clickedValue.isCheck = 1;}
}

Swiper和组件通信

• 新增属性：
  slidesPerView:表示设置轮播图一次显示几张图片
  slidesPerGroup:表示每点击下一页切换图片个数（默认为1）
• 鼠标移上边框效果

定义响应式数据

data(){return {currentIndex:0}
}

绑定触发事件传参index修改currentIndex，currentIndex==index则添加class属性
(index为v-for遍历图片的索引值)

<img :class="{active:currentIndex==index}" @click=“changeIndex(index)”/>

methods:{changeIndex(index){this.currentIndex = index;}
}

• 兄弟组件通信
  
  因此当点击轮播图触发changeIndex事件时，还需要向兄弟组件（也就是上方）传递索引值

全局事件总线
在changeIndex方法中添加this.$bus.$emit('getIndex',this.currentIndex)表示当点击时还需触发getIndex事件传递参数
那么还需要在兄弟组件内接收，

data(){return {currentIndex : 0}
},
mounted(){this.$bus.$on('getIndex',index=>{//这里便可以拿到index进行赋值到兄弟组件的响应式数据内this.currentIndex = index;})
}