尚品汇前端项目总结3（P60-P90）

最新推荐文章于 2023-06-18 18:47:41 发布

bumengbuzhangfu

最新推荐文章于 2023-06-18 18:47:41 发布

阅读量337

点赞数

分类专栏：尚品汇项目总结文章标签：前端 javascript html

本文链接：https://blog.csdn.net/bumengbuzhangfu/article/details/130254915

版权

本文详细介绍了使用Vue.js开发电商系统的一些关键模块，包括路由的滚动行为定制、产品属性值的排他选择、实现放大镜效果、购买数量正则验证、加入购物车功能、购物车组件开发、游客身份的UUID管理、购物车数据动态展示、商品数量修改以及删除操作。同时，涵盖了注册与登录过程中的验证码、用户信息管理等方面的技术实现。

摘要由CSDN通过智能技术生成

detail模块开发

路由的滚动行为

使用前端路由，当页面切换新路由时，想要页面滚到顶部，或者保持原先的滚动位置，可以自定义路由切换时页面的滚动行为

let router = new VueRouter({
    routes
    scrollBehavior(to,before,savedPosition) {
        //return 期望滚动到哪个位置
        //滚动到顶部
        return { y: 0 }
    }
})

to和from表示路由对象savedPosition当且仅当popstate（通过浏览器的前进后退按钮触发）导航时才可用

return的信息格式为{x:number,y:number}

产品售卖属性值排他思想

点击的标签加上样式：要获得被点击的属性值以及属性值列表，当发生点击事件的时候，先将属性列表中所有的属性都清除样式，然后再给被点击的属性加上样式

      changeClass(spuSaleAttrValueList,spuSaleAttrValue){
        for(let i=0;i<spuSaleAttrValueList.length;i++){
          spuSaleAttrValueList[i].isChecked=0;
        }
        spuSaleAttrValue.isChecked=1;
      }

放大镜

放大镜结构如下，下面为轮播图，与之前的轮播图不同的就是再swiper里面设置了一次展示几张【slidesPerView:3】

<div class="spec-preview">
    <!-- 背景图片 -->
    <img :src=" imgObj.imgUrl"  />
    <!-- 触发事件的地方 -->
    <div class="event" @mousemove="small" ref="box"></div>
    <!-- 放大的部分 -->
    <div class="big" ref="big">
      <img :src=" imgObj.imgUrl" ref="img" />
    </div>
    <!-- 覆盖层 -->
    <div class="mask" ref="mask"></div>
  </div>

event.offsetX,event.offsetY：鼠标相对于父盒子的位置

offsetWidth,offsetHeight

style.top,style.left：元素相对于父盒子的定位

逻辑部分：首先要判断mask的位置是否超出边界，如果超出就做相应处理，img的移动部分主要是利用公式

img移动距离/mask移动距离=-img可移动最大距离/mask可移动最大距离

因为img和mask移动方向相反，所以有一个负号

    small(event){
      let mask=this.$refs.mask;
      let box=this.$refs.box;
      let big=this.$refs.big;
      let img=this.$refs.img;
      let left=event.offsetX-mask.offsetWidth/2;
      let top=event.offsetY-mask.offsetHeight/2;
      if(event.offsetX-mask.offsetWidth/2<0){
        left=0
      } 
      if(event.offsetX-mask.offsetWidth/2>box.offsetWidth-mask.offsetWidth){
        left=box.offsetWidth-mask.offsetWidth
      }
      if(event.offsetY-mask.offsetHeight/2<0){
        top=0
      }
       if(event.offsetY-mask.offsetHeight/2>=box.offsetHeight-mask.offsetHeight){
        top=box.offsetHeight-mask.offsetHeight
      }
      mask.style.top=top+'px';
      mask.style.left=left+'px';
      //最大偏移量的比
      img.style.left=-((img.offsetWidth-big.offsetWidth)/(box.offsetWidth-mask.offsetWidth))*left+'px'
      img.style.top=-((img.offsetHeight-big.offsetHeight)/(box.offsetHeight-mask.offsetHeight))*top+'px'