DEMO在这里。
基于 Vue.js 的记事本应用,实现了以下功能:
- 增删、编辑笔记
- 标记笔记是否为已完成状态
- 按
类别
、标题
、内容
或时间戳
进行过滤 - 按
创建时间
或标题
排序 - 暂存未确认保存的笔记
- 支持
文本
和涂鸦
两种记录方式- 文本编辑器支持
Markdown
格式 - 涂鸦编辑器(来自我的另一个项目)支持
选取颜色
、撤销
、重做
、清除画布
- 文本编辑器支持
- 通过
localStorage
对象实现数据的本地持久化 - 对不同尺寸的桌面端和移动端响应适配
TODO:
- 编辑笔记时的输入内容验证
- 用Firebase代替本地存储
10月21日更新:
- 改善了移动端编辑器的体验:在移动端限制主容器的高度并使溢出内容隐藏,避免编辑器里的
touch
事件造成视口滚动
本地预览步骤:
$ npm i
$ npm run dev
在 8080 端口查看。