虾皮Coder-CSDN博客

原创 Vue3无缝衔接自动轮播

本文实现了一个Vue3图片轮播组件，支持自动轮播、鼠标悬停暂停和响应式设计。组件通过requestAnimationFrame实现平滑动画，采用三倍数据复制技术实现无缝衔接轮播效果。主要特性包括：可配置轮播速度、图片尺寸、遮罩层显示；支持图片预加载；提供悬停放大和标题显示效果；适配不同屏幕尺寸。组件通过计算属性处理显示数据，监听属性变化自动更新，并优化了动画性能与内存管理。

2025-12-01 18:41:21 85

原创 vue3 实现pdf翻页效果本文实现了一个基于Vue.js的PDF电子书阅读器组件，主要功能包括：采用左右分栏布局，左侧为目录树形导航，右侧显示PDF内容；支持翻页效果，可跳转到指定页码；响

本文实现了一个基于Vue.js的PDF电子书阅读器组件，主要功能包括：采用左右分栏布局，左侧为目录树形导航，右侧显示PDF内容；支持翻页效果，可跳转到指定页码；响应式设计，适配不同屏幕尺寸；提供书籍封面、标题和作者信息展示；实现PDF加载进度监听和错误处理。技术实现上使用了PDF.js解析PDF文件，结合PageFlip库实现翻页动画效果，通过Vue3的组合式API管理状态和业务逻辑。组件支持动态调整尺寸，确保在不同设备上都能获得良好的阅读体验。

2025-10-30 15:06:43 261

原创这篇文章介绍了一个具有轮播功能的博物馆展示网页界面。页面采用三栏布局，中央展示当前博物馆的详细信息（包括名称、图片和简介），左右两侧分别展示前后相邻的博物馆信息。用户可以通过导航按钮切换展示的博物馆，

这篇文章介绍了一个具有轮播功能的博物馆展示网页界面。页面采用三栏布局，中央展示当前博物馆的详细信息（包括名称、图片和简介），左右两侧分别展示前后相邻的博物馆信息。用户可以通过导航按钮切换展示的博物馆，并伴有平滑的滑动过渡动画效果。代码中包含了五个博物馆的数据（柳湾彩陶博物馆、桂林真皮岩遗址博物馆等），每个都有名称、描述和图片资源。页面样式采用了典雅的棕红色调，信息布局清晰，特别突出了当前展示的博物馆内容。

2025-08-22 17:30:47 291

原创该代码实现了一个基于Vue 3的电子书阅读器组件，主要功能包括：翻页效果：使用PageFlip库实现书籍翻页动画效果图片加载：支持批量预加载图片并显示加载进度目录功能：提供多级目录导航，可点击跳

该代码实现了一个基于Vue 3的电子书阅读器组件，主要功能包括：翻页效果：使用PageFlip库实现书籍翻页动画效果图片加载：支持批量预加载图片并显示加载进度目录功能：提供多级目录导航，可点击跳转到指定页面响应式设计：适配不同屏幕尺寸错误处理：包含缓存问题检测和重新加载机制交互功能：提供首页按钮、目录展开/收起等操作组件通过API获取书籍信息和目录数据，并支持页面跳转、进度跟踪等功能。界面采用现代化设计，包含加载动画和交互反馈。

2025-08-22 17:17:48 387 1

原创 vue3 多行文字溢出省略号显示查看更多，否不显示

本文展示了一个使用Vue 3实现的文字溢出检测组件。通过CSS设置-webkit-line-clamp限制文本显示3行，并利用scrollHeight与clientHeight比较来判断文本是否溢出。组件包含一个300px宽度的文本容器，当文本超过3行时会显示"文字溢出"提示，否则显示"未溢出"。该实现使用了Vue的Composition API，通过ref获取DOM元素并在onMounted生命周期中执行溢出检测。

2025-07-07 11:41:25 467

原创 vue3 实现贪吃蛇完整版

这是一个基于Vue.js开发的现代化贪食蛇游戏，采用响应式设计，支持PC和移动端。游戏界面包含渐变背景、圆角元素和阴影效果，提供得分统计、速度调节功能。玩家可使用方向键或WASD控制蛇的移动，吃到食物后蛇身会变长并加速。游戏实现碰撞检测、自动食物生成和本地最高分存储功能，包含三种状态界面（准备、暂停、结束）。代码采用Composition API编写，包含完整的游戏逻辑、画布渲染和键盘事件处理，并针对性能优化使用了防抖和节流技术。

2025-07-02 15:10:22 144

原创 vue3-carousel 轮播中间主图两边部分

本文介绍了一个基于Vue3的轮播组件实现方案。使用vue3-carousel库构建响应式轮播图，主要功能包括：1) 自动播放与悬停暂停；2) 导航按钮和分页器；3) 点击图片跳转详情页；4) 适配不同屏幕尺寸。组件配置了5张示例图片，支持居中显示和循环播放。样式方面实现了悬停显示导航按钮、分页点高亮效果，并针对移动端做了优化（如小屏常显导航按钮）。安装只需执行npm或yarn命令即可。该组件适用于网站首页等需要展示图片轮播的场景。

2025-07-02 11:54:10 780 2

weixin_61679729的博客