整体认识
路由配置
准备组件模版
销量人气
100+
销量人气
商品评价
200+
查看评价
收藏人气
300+
收藏商品
品牌信息
400+
品牌主页
配置路由
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
// path和component对应关系的位置
routes: [
{
path: '/',
component: Layout,
children: [
{
path: '',
component: Home
},
{
path: 'category/:id',
component: Category
},
{
path: 'category/sub/:id',
component: SubCategory
},
{
path: 'detail/:id',
component: Detail
}
]
},
{
path: '/login',
component: Login
}
],
// 路由滚动行为定制
scrollBehavior () {
return {
top: 0
}
}
})
绑定模版测试跳转
{{ item.name }}
¥{{ item.price }}
基础数据渲染
封装接口
import request from '@/utils/http'
export const getDetail = (id) => {
return request({
url: '/goods',
params: {
id
}
})
}
获取数据渲染模版
goods.categories[0].name
}}
销量人气
{{ goods.salesCount }}+
销量人气
商品评价
{{ goods.commentCount }}+
查看评价
收藏人气
{{ goods.collectCount }}+
收藏商品
品牌信息
{{ goods.brand.name }}
品牌主页
{{ goods.name }}
{{ goods.desc }}
{{ goods.oldPrice }}
{{ goods.price }}
加入购物车
热榜区域实现
两块热榜相比，结构一致，标题title和列表内容不同
封装hot组件
{{title}}
{{item.name}}
{{item.desc}}
¥{{item.price}}
封装接口
/**
* 获取热榜商品
* @param {Number} id - 商品id
* @param {Number} type - 1代表24小时热销榜 2代表周热销榜
* @param {Number} limit - 获取个数
*/
export const fetchHotGoodsAPI = ({ id, type, limit = 3 }) => {
return request({
url:'/goods/hot',
params:{
id,
type,
limit
}
})
}
使用组件传入不同的type
图片预览组件封装
小图切换大图实现
思路：维护一个数组图片列表，鼠标划入小图记录当前小图下标值，通过下标值在数组中取对应图片，显示到大图位置
放大镜效果实现
功能拆解 1️⃣左侧滑块跟随鼠标移动 2️⃣右侧大图放大效果实现 3️⃣鼠标移入控制滑块和大图显示隐藏 思路 1️⃣获取到当前的鼠标在盒子内的相对位置（useMouseInElement）,控制滑块跟随鼠标移动（left/top） 2️⃣实现放大效果，大图的宽高是小图的两倍，大图的移动方向和滑块移动方向相反，且数值为2倍 3️⃣鼠标移入盒子（isOutside），滑块和大图才显示（v-show）
组件props适配
组件中的图片列表不能写死，需要通过props参数把接口数据传入
defineProps({
imageList:{
type:Array,
default:()=>[]
}
})
总结
1️⃣封装复杂交互组件的通用思路 2️⃣图片预览组件的封装逻辑
推荐链接
发表评论