Based on vue+vuex+localStorage development of local notepad

This project is generated by vue-CLI scaffolding. The project code can be cloned on my Github. Clone down to go to the file directory

// Run NPM install // after the dependency installation is complete, run NPM run dev // to access the project from http://localhost:8080Copy the code

Github address: github.com/lin-xin/not…

Demo address: test.omwteam.com/

1. Directory structure

| - notepad / | | - build / | | - confg / | | - node_modules / | | - SRC / | | | - assets / | | | - components / | | | | -- add_event. Vue / / add event component | | | | -- dialog. Vue / / pop-up components | | | | -- event_table. Vue / / form component | | | | -- header. Vue / / head component | | | | - view the vue / / toolbar component | | | | - store / / / deposit vuex code | | | -- actions. Js / / vuex action file | | | | -- index. Js / / vuex core code | | | - App. Vue / / parent component | | | -- main. Js / / entry file | | - static / | | -. Babelrc | | -. Editorconfig | | -. Gitgnore | | - index. The HTML | | -- package. Json | | - README. MdCopy the code

Two, the main difficulties

1. Fold the panel

Difficulty: Click on the folding panel title to animate sliderUp and sliderDown, but div height auto, using Transition: height.3s does not work.

The transition works by clicking on the div height value, assigning it to style.height, and then changing the height to 0.

The code is as follows:

<template> <div id="app"> <div class="event-tab" @click.self="changeCollapse(0,$event)"> uncompleted </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, indicates that the current collapsed panel shows contentHeight: 'auto' // contentHeight, store current folding panel height}]}}, 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, shut off the folding panel const ulElement = event. The target. The 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, Show folded panel 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; } </style>Copy the code

2. Switch status

Difficulty: Switching between different states and displaying events in different state lists in real time

Solution: VuEX is used for state management, storing all events and states in store objects, and calculating properties to get events in components, so that there is real time.

The code is as follows:

// store/index.js import Vue from 'vue'; import Vuex from 'vuex'; import * as actions from './actions.js'; Vue.use(Vuex); const state = { event: Const mutations = {EVENTDONE(states,obj){const mutations = {EVENTDONE(states,obj){for (let I = 0; i < states.event.length; i++) { if (states.event[i].id === obj.id) { states.event[i].type = 2; // type == 2, indicating that the state is break completed; } } } } 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; }}); }}, methods:{moveToDone(id,event){this.$store.dispatch(' eventDone ',id); } } } </script>Copy the code

3. Local storage

LocalStorage is a new way to store data on the client in HTML5. There is no time limit. Data will still be available the next day, the next week, or the next year.

Usage:

Localstorage.setitem (item, value) 2) Obtain data: localstorage.getitem (item) 3) Remove data: localstorage.removeitem (item)Copy the code

The code is as follows:

// store/index.js const LocalEvent = function(item){this.get = function(){// store/index.js const LocalEvent = function(item){this.get = function(){// store data return JSON.parse(localStorage.getItem(item)) || []; } this.set = function (obj) {// Get data localstorage.setitem (item, json.stringify (obj)); } this.clear = function () {localstorage.removeItem (item); } } const local = new LocalEvent('lx_notepad'); // create a locally stored instance const state = {event: Open mutations = {state,obj){open mutations = {state,obj){ States.event.unshift (obj.items); local.set(states.event); }}Copy the code

4. Communication between parent and child components

Knowledge point: Component instances are scoped in isolation. This means that the parent component’s data cannot and should not be directly referenced within the child component’s template.

1) The parent component can use props to pass data to the child component. 2) Child components can use $emit to trigger custom events for parent components.Copy the code

The code is as follows:

// app. vue <template> <div id=" App "> <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" </button> <button type="button" class=" certain-btn "@click="cancelEvent"> @click="sureEvent"> sure </button> </div> </div> </template> <script> export default {props:['isShow',' MSG '], // Methods: {cancelEvent(){this.$emit('cancel'); // Cancel button triggers the parent component's custom event of Cancel}, sureEvent(){this.$emit('sure'); // Confirm button triggers the parent component's sure custom event}}} </script>Copy the code

5. Filter function

Function description: Filter by type and keyword

Filter all events by type and content.

The code is as follows:

<script> export default {data: function(){return {screen_type: 0, // Screen_title: 0 }}, computed:{notapad(){var self = this; Return self.$store.state.event.filter(function(d){// Use the filter if(self.screen_type! If (d.type === self.screen_type){return d; if(d.type == self.screen_type){return d; } }else if(self.screen_type ! == 0 && self.screen_title ! If (d.type === self.screen_type && d.c. onten.indexof (self.screen_title)! == -1){ return d; } }else if(self.screen_type === 0 && self.screen_title ! If (d.c onten.indexof (self.screen_title)! == -1){ return d; }}else{// do not filter return d; }}); } } } </script>Copy the code