基于vue2.0+vuex+localStorage开发的本地记事本示例
发布时间:2020-12-17 03:03:37 所属栏目:百科 来源:网络整理
导读:本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。 实现效果 功能说明 支持回车添加事件 支持事件状态切换 添加事件 -> 进入未完成列表 未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。 实现效果功能说明
项目笔记本项目是使用vue-cli脚手架生成的项目,项目代码可以到我的github上clone下来。clone下来之后可进入文件目录 // 如果 node-sass 安装失败,可使用 cnpm 安装
npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v // 查看cnpm版本号确认安装成功 cnpm install node-sass -D //安装成功后再看看是否可以正确运行了 一、目录结构二、主要难点1.折叠面板 难点:点击折叠面板title,要动画实现sliderUp和sliderDown,但是div高度auto,使用transition: height .3s无效。 解决方法:点击时候获取div高度值,赋值给style.height,然后再改变高度为0,这样transition才会生效。 代码如下:
|