扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本文采用vue2.0+vuex+localStorage+sass+webpack，实现一个本地存储的记事本。兼容PC端和移动端。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、网络空间、营销软件、网站建设、建昌网站维护、网站推广。
实现效果
功能说明
项目笔记
本项目是使用vue-cli脚手架生成的项目，项目代码可以到我的github上clone下来。clone下来之后可进入文件目录
// 执行 npm install // 安装依赖完成之后再执行 npm run dev // 即可在本地开启 http://localhost:8080 访问该项目 // 如果 node-sass 安装失败，可使用 cnpm 安装 npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v // 查看cnpm版本号确认安装成功 cnpm install node-sass -D //安装成功后再看看是否可以正确运行了
一、目录结构
|——notepad/ | |——build/ | |——confg/ | |——node_modules/ | |——src/ | | |——assets/ | | |——components/ | | | |——add_event.vue //添加事件组件 | | | |——dialog.vue //弹出框组件 | | | |——event_table.vue //表格组件 | | | |——header.vue //头部组件 | | | |——tools.vue //工具栏组件 | | |——store/ //存放vuex代码 | | | |——actions.js //vuex的action文件 | | | |——index.js //vuex核心代码 | | |——App.vue //父组件 | | |——main.js //入口文件 | |——static/ | |——.babelrc | |——.editorconfig | |——.gitgnore | |——index.html | |——package.json | |——README.md
二、主要难点
1.折叠面板
难点：点击折叠面板title,要动画实现sliderUp和sliderDown，但是div高度auto，使用transition： height .3s无效。
解决方法：点击时候获取div高度值，赋值给style.height，然后再改变高度为0，这样transition才会生效。
代码如下：
未完成
2.切换状态
难点：在不同的状态间切换，实时地把事件在不同状态列表中显示出来
解决方法：利用vuex进行状态管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。
代码如下：
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions.js';
Vue.use(Vuex);
const state = {
event: [] // event,用来存储所有事件
}
const mutations = {
EVENTDONE(states,obj){ // EVENTDONE，用来修改事件的状态为已完成
for (let i = 0; i < states.event.length; i++) {
if (states.event[i].id === obj.id) {
states.event[i].type = 2; // type == 2,表示状态为已完成
break;
}
}
}
}
export default new Vuex.Store({
state,
actions,
mutations
})
// store/actions.js
export const eventdone = ({ commit }, param) =>{
commit('EVENTDONE',{id: param});
}
// App.vue
-
{{value.content}}
3.本地存储
知识点：localStorage是HTML5提供的一种在客户端存储数据的新方法，没有时间限制，第二天、第二周或下一年之后，数据依然可用。
用法：
1）存储数据：localStorage.setItem(item, value)
2）获取数据：localStorage.getItem(item)
3）移除数据：localStorage.removeItem(item)
代码如下：
// store/index.js
const LocalEvent = function(item){ // 定义一个本地存储的构造函数
this.get = function () { // 拿数据
return JSON.parse(localStorage.getItem(item));
}
this.set = function (obj) { // 存数据
localStorage.setItem(item,JSON.stringify(obj));
}
this.clear = function () { // 删数据
localStorage.removeItem(item);
}
}
const local = new LocalEvent('lx_notepad'); // 创建一个本地存储的事例
const state = local.get() || {
event: [],
count: 0
}
const mutations = {
ADDEVENT(states,obj){ // ADDEVENT，添加新的事件，并存储到localStorage里
states.count++;
obj.items.id = states.count;
states.event.unshift(obj.items);
local.set(states);
}
}
4.父子组件间的通讯
知识点：组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。
1）父组件可以使用 props 把数据传给子组件。
2）子组件可以使用 $emit 触发父组件的自定义事件。
代码如下：
// App.vue// 通过 isShow、msg 把数据传个子组件，监听自定义事件cancel、sure。// dialog.vue
5.筛选功能
功能描述：可根据 类型 和 关键词 进行筛选
知识点：在返回所有事件的计算属性上，使用过滤器( filter )，进行对 type 和 content 的筛选，返回符合条件的事件。
代码如下：
总结
虽然只是做了个小小的记事本，但是我感觉收获还是很大的，很多知识点掌握得更加的牢固。这个记事本只做了一个页面，就没有用vue-router，路由也是vue里很强大的功能。
做这个记事本的初衷，是因为在工作中，我都会把最近要做的事情给记在本子上，完成之后就会打钩，所以想把这个给放到电脑上去实现。
demo下载地址：notepad_jb51.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网