基于vue2.0+vuex+localStorage开发的本地记事本示例


Posted in Javascript onFebruary 28, 2017

本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。

实现效果

基于vue2.0+vuex+localStorage开发的本地记事本示例

功能说明

  • 支持回车添加事件
  • 支持事件状态切换
    • 添加事件 -> 进入未完成列表
    • 未完成 -> 已完成(勾选checkbox)
    • 未完成 -> 已取消(点击取消按钮)
    • 已完成 -> 未完成(取消勾选checkbox)
    • 已取消 -> 未完成(点击恢复按钮)
  • 支持控制台打印所有事件数据
  • 支持筛选事件
  • 支持编辑事件
  • 支持删除事件
  • 支持清空所有事件
  • 支持本地化存储
  • 支持折叠面板

项目笔记

本项目是使用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才会生效。

代码如下:

<template>
  <div id="app">
    <div class="event-tab" @click="changeCollapse(0,$event)">未完成</div>
    <ul class="event-box" :style="{'height':'auto','display':'block'}">
      <li class="event-list" v-for="value in getToDo">
        <div>{{value.content}}</div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        collapse:[
          {
            show: true,           // show == true, 表示当前折叠面板显示
            contentHeight: 'auto'      // contentHeight, 存储当前折叠面板高度
          }
        ]
      }
    },
    methods:{
      changeCollapse(num,event){         // 根据折叠面板当前状态进行显示或折叠
        if(this.collapse[num].show){
          this.closeCollapse(num,event);
          this.collapse[num].show = false;
        }else{
          this.openCollapse(num,event);
          this.collapse[num].show = true;
        }
      },
      closeCollapse(num,event){          // closeCollapse,关闭折叠面板
        const ulElement = event.currentTarget.nextElementSibling;
        ulElement.style.height = ulElement.offsetHeight + 'px';
        this.collapse[num].contentHeight = ulElement.offsetHeight;
        setTimeout(function () {
          ulElement.style.height = '0px';
          setTimeout(function () {
            ulElement.style.display = 'none';
          },300)
        },10)

      },
      openCollapse(num,event){          // openCollapse,显示折叠面板
        const ulElement = event.currentTarget.nextElementSibling,
            self = this;
        ulElement.style.display = 'block';
        setTimeout(function () {
          ulElement.style.height = self.collapse[num].contentHeight + 'px';
          setTimeout(function () {
            ulElement.style.height = 'auto';
          },300)
        },10)
      }
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss">
  ul.event-box{
    list-style: none;
    overflow: hidden;
    border:{
      left:1px solid #eee;
      right:1px solid #eee;
    }
    transition: height .3s;             // transition,添加折叠或显示时的动画效果
  }
</style>

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
<template>
  <div id="app">
    <ul class="event-box">
      <li class="event-list" v-for="value in getToDo">
        <input type="checkbox" @click="moveToDone(value.id,$event)">
        <div>{{value.content}}</div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    computed:{
      getToDo(){  // getToDo,实时获取状态为未完成的事件
        return this.$store.state.event.filter(function(d){
          if(d.type === 1){  // type == 1,表示状态为未完成
            return d;
          }
        });
      }
    },
    methods:{
      moveToDone(id,event){ // moveToDone,选中checkbox将事件移至已完成
        this.$store.dispatch('eventdone',id);
      }
    }
  }
</script>

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
<template>
  <div id="app">
    // 通过 isShow、msg 把数据传个子组件,监听自定义事件cancel、sure。
    <n-dialog :is-show="dialog" :msg="tips" @cancel="dialog = false" @sure="sureDialog"></n-dialog>
  </div>
</template>
<script>
  import nDialog from './components/dialog.vue';
  export default {
    data(){
      return {
        dialog: true,
        tips: '清除后无法恢复,确认清除吗?'
      }
    },
    components: {
      nDialog
    },
    methods:{
      sureDialog(){
        this.$store.dispatch('clearevent');
        this.dialog = false;
      }
    }
  }
</script>

// dialog.vue
<template>
  <div class="dialog" :class="{'dialog-show':isShow}">
    <div class="dialog-wrapper">
      <div class="dialog-content">
        {{msg}}
      </div>
      <div class="dialog-btns">
        <button type="button" class="cancel-btn" @click="cancelEvent">取消</button>
        <button type="button" class="sure-btn" @click="sureEvent">确定</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props:['isShow','msg'], // 通过 props 属性获得父组件传递过来的数据
    methods: {
      cancelEvent(){
        this.$emit('cancel'); // 取消按钮触发父组件的 cancel 自定义事件
      },
      sureEvent(){
        this.$emit('sure');  // 确认按钮触发父组件的 sure 自定义事件
      }
    }
  }
</script>

5.筛选功能

功能描述:可根据 类型 和 关键词 进行筛选

知识点:在返回所有事件的计算属性上,使用过滤器( filter ),进行对 type 和 content 的筛选,返回符合条件的事件。

代码如下:

<script>
  export default {
    data: function(){
      return {
        screen_type: 0,                           // 筛选类型,0 表示不筛选
        screen_title: '',                          // 筛选关键词,'' 表示不筛选
      }
    },
    computed:{
      notapad(){
        var self = this;
        return self.$store.state.event.filter(function(d){         // 使用过滤器
          if(self.screen_type !== 0 && self.screen_title === ''){     // 只筛选类型
            if( d.type === self.screen_type ){
              return d;
            }
          }else if(self.screen_type !== 0 && self.screen_title !== ''){  // 筛选类型和关键词
            if( d.type === self.screen_type && d.content.indexOf(self.screen_title) !== -1){
              return d;
            }
          }else if(self.screen_type === 0 && self.screen_title !== ''){  // 只筛选关键词
            if(d.content.indexOf(self.screen_title) !== -1){
              return d;
            }
          }else{                             // 不进行筛选
            return d;
          }
        });
      }
    }
  }  
</script>

总结

虽然只是做了个小小的记事本,但是我感觉收获还是很大的,很多知识点掌握得更加的牢固。这个记事本只做了一个页面,就没有用vue-router,路由也是vue里很强大的功能。

做这个记事本的初衷,是因为在工作中,我都会把最近要做的事情给记在本子上,完成之后就会打钩,所以想把这个给放到电脑上去实现。

demo下载地址:notepad_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 #Javascript
原生js实现可拖拽效果
Feb 28 #Javascript
javascript 面向对象function详解及实例代码
Feb 28 #Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 #Javascript
原生js实现鼠标跟随效果
Feb 28 #Javascript
canvas实现简易的圆环进度条效果
Feb 28 #Javascript
JS实现的tab切换选项卡效果示例
Feb 28 #Javascript
You might like
相对路径转化成绝对路径
2007/04/10 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
八大排序算法的Python实现
2021/01/28 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
树莓派升级python的具体步骤
2020/07/05 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
善意的谎言事例
2014/02/15 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
生物科学专业自荐书
2014/06/20 职场文书
经典演讲稿开场白
2014/08/25 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
校运会宣传稿大全
2015/07/23 职场文书
法制教育主题班会
2015/08/13 职场文书
优质护理服务心得体会
2016/01/22 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
python基础学习之递归函数知识总结
2021/05/26 Python