本文采用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.orgcnpm -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.jsimport 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.jsexport 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.jsconst 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_jb51.rar
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
