08-1 vuex-notebar.vue

<template>
  <div class="notes">
    <div class="notebar">
      <notebar @setCurNote="setNote"></notebar>
    </div>
    <div class="content">
      <div class="topbar">
        <span>创建时间: </span><Time :time="curNote.createdAt||new Date()" :interval="1" />
        <span>修改时间: </span><Time :time="curNote.updatedAt||new Date()" :interval="1" />
        <Button class='delete' type="error" size="small" @click.native='onDelete'>删除</Button>
        <span class='belong'>{{statusText}}</span>
      </div>
      <div class="title">
        <input type="text" v-model="curNote.title" @input="saveNote(),statusText='正在修改...'">
      </div>
      <mavon-editor
        v-model="curNote.content"
        :toolbarsFlag = 'false'
        @change="saveNote(),statusText='正在修改...'"/>
    </div>
  </div>
</template>
<script>

import notebar from './Notebar'
import Notebook from '../apis/Notebooks'
import Note from '../apis/Notes'
import debounce from 'debounce';
import { mapGetters, mapState, mapActions } from 'Vuex';
export default {
  components: {
    notebar
  },
  data() {
    return {
      notes: [],
      content: "",
      statusText: "已保存",
    }
  },
  computed: {
    ...mapGetters(['curNote'])
  },
  methods: {
    ...mapActions(['updateNote','deleteNote']),
    setNote(){
      console.log(arguments)
      this.curNote = arguments[0],
      this.notes = arguments[1]
    },
    onDelete(){
      this.deleteNote({noteId:this.curNote.id})
    },
    saveNote: debounce(function(){
      this.updateNote({noteId:this.curNote.id,title:this.curNote.title,content:this.curNote.content}).then(res=>{
       console.log('保存')
       this.statusText = '已保存'
      }).catch(err=>{
        this.statusText = '保存失败'
        this.$Message.error(err.msg)
      })
    },1500),
  }
}
</script>

<style lang="less" scoped>
  .notes {
    margin: -16px;
    height: calc(~'100vh - 60px');
    .notebar {
      width: 220px;
      height: 100%;
      border-right: 2px solid #ccc
    }
    .content {
      position: absolute;
      margin-left: 221px;
      top: 0;
      width: 940px;
      height: 800px;
      padding: 0;
      .topbar {
        height: 50px;
        padding: 18px;
        border-bottom: 1px solid #eee;
        background: #fff;
        .belong ,.delete{
          float: right
        }
        .delete {
          margin-top: -3px;
          margin-left: 16px;
        }
      }
      .title {
        input {
          width: 100%;
          border: none;
          outline: none;
          font-size: 26px;
          padding-left: 15px;
          background: #f8f8f9
        }
      }
    }
  }
</style>