Jest及Vue/test-utils使用(4)—点击测试

Jest及Vue/test-utils使用(3)—条件测试

Jest及Vue/test-utils使用(2)—时间格式化测试

Jest及Vue/test-utils使用(1)—正反向测试

Jest.fn()、Jest.spyOn()、Jest.mock()

mount与shallowMount的使用场景、异同以及配置和接口方法，测试替身的作用

mount、shallowMount的options、方法与测试替身stub

Jest及Vue/test-uitls—配置

组件封装：将分类列表封装成一个可复用的组件（CategoryComponent），用于显示一级、二级和三级分类⁠。
数据结构：使用嵌套结构存储分类数据，每个级别的分类都有自己的状态
交互逻辑：点击一级分类显示对应的二级分类，点击二级分类显示对应的三级分类⁠1。再次点击已选中的分类会取消下级分类的选中状态，但保持当前级别的展示⁠1。如果某一级别没有子分类，则显示输入框以添加新分类⁠。
数据管理：使用克隆数据来保存完整的分类数据，而实际显示的数据是根据用户交互动态过滤的⁠。实现了添加、编辑和删除分类的功能，并在这些操作后更新both显示数据和克隆数据⁠1⁠。
父子组件通信：使用事件发射（emit）来通知父组件更新数据，父组件则通过props传递数据给子组件⁠1⁠。
表单验证：在添加和编辑分类时使用表单验证确保数据的正确性⁠1⁠。
性能优化：通过动态加载和隐藏分类来优化性能，而不是一次性加载所有数据⁠。

记一次店匠的组件封装和交互

i18n(国际化)方案总结

购物车页面功能概述页面分为左侧商品列表和右侧订单摘要，包含促销信息、运费信息、商品列表和结账按钮⁠。支持商品数量调整、移除商品，并实时计算总价和应用折扣⁠。提供普通结账和PayPal快速结账选项，结账前验证商品有效性⁠。用户体验和性能优化使用事件委托和防抖技术处理用户交互，优化性能⁠；通过AJAX动态更新购物车信息和UI，保持数据一致性⁠；⁠实现响应式设计，适配不同屏幕尺寸⁠；⁠显示清晰的价格和折扣信息，使用进度条鼓励用户达到促销目标⁠⁠

EJS模板引擎编写购物车页面。包含促销信息、运费信息、商品列表和普通/快速结账按钮⁠。

这段代码实现了一个动态的颜色选择功能,允许用户在不刷新页面的情况下查看不同颜色的产品图片和价格,提高了用户体验和交互性。

鼠标与缩略图交互动态更改商品主图和链接(下)

实现一个动态的颜色选择功能,允许用户在不刷新页面的情况下查看不同颜色的产品图片和价格,提高了用户体验和交互性。

鼠标与缩略图交互动态更改商品主图和链接(上)

使用抽屉式导航，包含顶部标题和关闭按钮⁠⁠，实现了响应式布局，针对PC端和移动端有不同的处理逻辑⁠⁠
移动端下，为有子菜单的导航项添加展开按钮和切换功能⁠。阻止了有子菜单的一级导航项的默认点击事件，优化用户体验⁠。

记一次移动端导航适配

实现了一个灵活、可定制的对话框组件，可以用于在网页中显示各种类型的弹出内容。它支持不同的尺寸、远程加载内容、模板渲染，并且具有良好的移动端适配性。

封装对话框

定义了一个Menu构造函数,用于创建可交互的菜单组件。主要功能包括:初始化菜单并设置事件监听。提供打开、关闭和切换菜单状态的方法。支持点击和鼠标悬停两种交互模式。可以自定义点击事件和切换样式类。在打开一个菜单时自动关闭其他菜单。点击菜单外部区域时自动关闭菜单。提供销毁方法以移除所有事件监听器。

封装菜单类

实现了一个可定制的遮罩层组件,通过JS控制其显示、隐藏,并能够设置不同的z-index值。它还包含了一些移动端的优化,如禁止页面滚动和响应式设计。

封装遮罩层

最近要把一个用java写的老项目，用egg.js和ejs、jquery重写一遍

自定义样式： 1.按组配置折线类型（实线、虚线等）⁠2..按组配置折线颜色⁠ 3.图例控制： 支持通过图例显示/隐藏单条折线⁠，确保至少保留一条折线可见⁠ 4.⁠按钮控制： 通过按钮控制整组折线的显示/隐藏⁠ 5.按钮边框颜色与组别颜色相同⁠，防止同时隐藏所有组的折线⁠ 6.⁠提示框（Tooltip）优化： 避免日期重复显示⁠ 7.按组展示数据，同组数据使用相同日期⁠ 8.⁠交互优化： 隔离emphasis和tooltip事件，避免鼠标进入坐标系就触发所有折线强调效果⁠。支持动态更新图表⁠实现从父组件到子组件的完整数据传递和处理逻辑⁠

记一次echarts封装，tooltip按组别展示并可以展示不同时间，交互优化隔离tooltip与emphasis

跨境独立站项目：商品拖曳排序

Vue3+TS拖拽排序(dragenter和dragover的区别与选择)

vue3 defineModel注意事项

可配置选择框列、超链接列、输入框列、switch开关列、图片列、tag列、操作栏、普通文本列