《Vue3项目实战:手写拖拽、随机布局、移动端适配》

0 阅读1分钟
  1. 项目简介

这是一个用 Vue 3 手写的沉浸式交互项目,主要功能包括:

· 手写拖拽系统(带边界限制、状态反馈)

1624e9d45549f7a519cbb0153cf38a14.jpg

· 随机标题位置 + 防重叠(碰撞检测)

03549e9bb7ad115c5138ec2b1f868ef5.jpg

· 顺序点击解锁 + 半小时限时消失(消失页面展示)

523c119e863e1bd52e445aaaadca959a.jpg

· 隐藏按钮 + 二次密码进后台

8edaf5ae9d995c8946e6c801917a7846.jpg

· 上传呼吸灯 + 金色光晕 + 全屏警告

ebb279d7c72f3882beabf6cf0a4a1565.jpg

· 日记本(动画、翻页、编辑、随机夸奖)

11bd4e5b2685118d90e5e846085bba31.jpg

· 书柜(字母排序、名字发光、同列拖拽)

2abd3d1f9f6c20732818ac29314a6dbf.jpg

· 沉浸式阅读器(左右翻页、搜索金光)

ea6c958cda6847061cebf8643e7c0b12.jpg

· 移动端适配(长按短按区分)

fef22130035cb5f739a8d8f09c63604e.jpg

  1. 演示视频

【个人独立开发:高自由度交互式前端架构与沉浸式视图管理-哔哩哔哩】 b23.tv/D8l08KQ

  1. 项目地址

网站链接:delanri-auren.netlify.app/

  1. 一点感想

做这个项目的过程,也是我系统梳理前端知识的过程。从拖拽实现到状态管理,从动画到适配,每一个功能都踩过坑,也学到了东西。项目能跑起来、能上线,就是最好的回报。

  1. 关于我

前端开发求职/接单中,欢迎查看简介联系。