本文采用 vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容 PC 端和移动端。在线预览地址:
本项目是使用 vue-cli 脚手架生成的项目,项目代码可以到我的 github 上 clone 下来。clone 下来之后可进入文件目录
- // 执行
- npm install
- // 安装依赖完成之后再执行
- npm run dev
- // 即可在本地开启 http://localhost:8080 访问该项目
github 地址:
demo 地址:
一、目录结构
- |——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.self="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.target.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.target.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 = {
- event: local.get()
- }
- const mutations = {
- ADDEVENT(states,obj){ // ADDEVENT,添加新的事件,并存储到localStorage里
- states.event.unshift(obj.items);
- local.set(states.event);
- }
- }
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>
虽然只是做了个小小的记事本,但是我感觉收获还是很大的,很多知识点掌握得更加的牢固。这个记事本只做了一个页面,就没有用 vue-router,路由也是 vue 里很强大的功能。 做这个记事本的初衷,是因为在工作中,我都会把最近要做的事情给记在本子上,完成之后就会打钩,所以想把这个给放到电脑上去实现。接下来我还会继续扩展功能,比如搜索。
来源: