09 2022 档案
摘要：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 保持原有尺寸
阅读全文
