qq_37107643-优快云博客

原创如何实现多个标签页之间的状态同步？

虽然本身不提供自动同步机制，但你可以通过监听storage事件来实现跨标签页的状态同步。当其他标签页修改了中的数据时，当前标签页会触发storage事件。注意：storage在另一个标签页中修改。

2025-07-29 15:46:34 261

原创 Vue 3 Pinia 持久化插件pinia-plugin-persistedstate

Pinia持久化插件pinia-plugin-persistedstate使用指南：该插件专为Pinia v3+设计，支持将store状态保存到localStorage或sessionStorage。安装后通过pinia.use()注册插件，在defineStore中设置persist属性即可启用。支持自定义存储key、存储引擎和指定持久化字段，提供恢复数据前后的钩子函数。注意该插件不兼容SSR环境，且应避免存储敏感信息。

2025-07-29 15:35:08 983

原创 css伪类实现

摘要：这段代码实现了一个毛玻璃背景效果，包含一个主元素和两个圆形伪元素。主元素定位在页面右侧，应用了80px模糊效果和35%透明度。通过:before伪元素创建青绿色圆形(317×367px)，:after伪元素创建红色圆形(322×223px)位于垂直居中位置。整体设计采用分层叠加和模糊处理，营造出玻璃质感效果。

2025-06-30 16:07:07 303

原创 Vue3 的 main.ts 中实现屏幕尺寸检测和跳转（PC ＜=＞ H5）

本文介绍如何使用纯JavaScript实现屏幕尺寸检测和自动跳转功能。通过在项目入口文件中添加设备检测函数checkDeviceAndRedirect()，判断当前屏幕宽度是否小于768px（移动端）。代码优先读取用户Cookie偏好设置，若未设置则根据屏幕尺寸自动跳转对应页面（PC端或移动端/h5路径）。同时监听窗口resize事件，并设置300ms防抖避免频繁触发。该方案适用于Web项目入口文件如main.js或App.vue，实现设备自适应路由功能。

2025-06-30 16:00:58 134

原创 Vue3+ts滚动鼠标隐藏/显示导航栏

摘要：该组件实现了一个智能导航栏，通过监听滚动方向自动显示/隐藏。采用top属性控制位置，CSS transition实现平滑动画效果。核心逻辑包括：判断滚动方向（上/下）、设置显示阈值（10px）、优化性能的防抖函数（50ms延迟）。组件固定在顶部，高度121px，使用0.3秒缓动过渡效果。代码展示了Vue3的setup语法，包含滚动事件监听/移除、状态管理等实现细节。

2025-06-30 15:54:53 271