摘要：
1.购物车页面-列表展示-本地 准备已选择的商品列表数据，已选择的商品件数以及需要支付的金额 渲染模板 // 有效商品列表 validList(state) { return state.list.filter((goods) => goods.isEffective && goods.stock 阅读全文
摘要：
1. 登录-消息提示组件封装 组件功能分析： 固定顶部显示，有三种类型：成功、错误、警告 显示消息提示时需要动画从上滑入 组件使用的方式不够便利，封装成工具函数的方式 <template> <div class="xtx-message" :style="style[type]"> <!-- 上面绑 阅读全文
摘要：
1.封装数量选择组件 功能分析： 默认值为1 可限制最大最小值 点击-就是减1，点击+就是加1 需要完成v-model的双向数据绑定 存在无label的情况 <script setup> // 组件间的v-model =》父组件绑定:modelValue，监听@update:modelValue i 阅读全文
摘要：
1. SKU和SPU概念 SPU代表一个商品，这个商品可以拥有很多属性 SKU代表这个商品可选规格的任意组合，是库存单位唯一标识 2. 路径字典 大致步骤 根据后台返回的sku数据得到有效sku组合(inventory > 0) 处理sku数组，使用power-set算法得到sku数组的子集 比如： 阅读全文
摘要：
1. 基础布局 完成商品详情基础布局，路由配置，搭好页面架子 2. 渲染面包屑 编写一个钩子函数useGoods.js，将面包屑获取数据的逻辑抽取出来。 // 拿到商品信息 import { findGoods } from '@/api/product' import { nextTick, re 阅读全文
摘要：
1.二级类目-筛选区展示 获取数据进行品牌和属性的渲染 <template> <div class="sub-filter" v-if="filterData && !filterDataLoading"> <div class="item"> <div class="head">品牌：</div> 阅读全文
摘要：
1. 顶级类目-面包屑组件的封装 了解render函数和h函数： render函数的返回值是html结构，渲染到#app容器，相对于template里传入html结构，render函数的优先级更高 h函数是一个创建vnode的函数，它接受三个参数： 一个html标签名 与这个html标签相关的属性或 阅读全文
摘要：
1. 新了解CSS属性：object-fit object-fit属性对图片进行剪切，保留原始比例 一般用于img标签和video标签。 object-fit属性值： fill 默认，不保证保持原有比例，内容拉伸填充整个内容容器 contain 保持原有尺寸比例，内容被缩放 cover 保持原有尺寸 阅读全文
摘要：
1. 面板封装 提取首页的公用面板进行复用 头部 标题和副标题由props传入 右侧内容由具名插槽right传入 查看更多封装成全局组件 主体 由默认插槽传入 <template> <!-- 封装面板组件 --> <div class="home-panel"> <div class="contai 阅读全文
摘要：
1. 骨架效果 目的：为了在加载过程中等待效果更好，封装骨架屏组件 实现步骤： 骨架屏组件需暴露的属性：高、宽、背景颜色，是否启用动画 使用插件的方式进行全局注册 <template> <!-- 骨架屏，就是一个可定制高、宽、背景以及动画的盒子 --> <div class="xtx-skeleto 阅读全文
