<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/marked.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="notebook">
<aside class="side-bar">
<div class="toolbar">
<button v-on:click="addNote" v-bind:title="addButtonTitle">
<i class="material-icons">add_box</i>
新建笔记
</button>
</div>
<div class="notes">
<div v-for="note in notes" class="note" v-on:click="selectNote(note)" v-bind:class="{selected:note === selectedNote}">
<i class="icon material-icons" v-if="note.favorite">star</i>
{{note.title}}
</div>
</div>
</aside>
<template v-if="selectedNote">
<section class="main">
<div class="toolbar">
<input v-model="selectedNote.title" placeholder="请输入笔记标题">
<button v-on:click="removeNote" title="删除笔记">
<i class="material-icons">delete</i>
</button>
<button v-on:click="favoriteNote" title="收藏笔记">
<i class="material-icons">{{selectedNote.favorite?'star':'star_border'}}</i>
</button>
</div>
<textarea v-model="selectedNote.content"></textarea>
<div class="toolbar status-bar">
<span class="date">
<span class="label">创建日期: </span>
<span class="value">{{selectedNote.created | changeDate}}</span>
</span>
<span class="lines">
<span class="label">行数: </span>
<span class="value">{{linesCount}}</span>
</span>
<span class="words">
<span class="label">单词数: </span>
<span class="value">{{wordsCount}}</span>
</span>
<span class="characters">
<span class="label">字符数: </span>
<span class="value">{{charactersCount}}</span>
</span>
</div>
</section>
<aside class="preview" v-html="notePreview">
</aside>
</template>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#notebook',
data(){
return{
notes:JSON.parse(localStorage.getItem('notes')) || [],
selectedId:localStorage.getItem("selected-id") || null,
}
},
methods:{
saveNote(v){
localStorage.setItem('notes',JSON.stringify(this.notes))
console.log("笔记已经保存! ",new Date())
},
addNote(){
const time = Date.now()
const note =
{
id:String(time),
title:'New Note' + (this.notes.length+1),
content:'Hi,Wellcome to write a new note!',
created:time,
favorite:false,
}
this.notes.push(note)
},
selectNote(v){
this.selectedId=v.id
},
removeNote(){
if (this.selectedNote && confirm('确定删除笔记?'))
{
const index = this.notes.indexOf(this.selectedNote)
if(index !== -1)
{
this.notes.splice(index,1)}
}
},
favoriteNote()
{
this.selectedNote.favorite=!this.selectedNote.favorite
}
},
computed:{
notePreview(){
return this.selectedNote?marked(this.selectedNote.content):''
},
addButtonTitle(){
return this.notes.length+' note(s) already'
},
selectedNote(){
return this.notes.find(note=>note.id===this.selectedId)
},
sortedNotes(){
return this.notes.slice().sort((a,b)=>a.created-b.created).sort((a,b)=>(a.favorite===b.favorite)?0:a.favorite?-1:1)
},
linesCount(){
if(this.selectedNote)
{
return this.selectedNote.content.split(/\r\n|\r|\n/).length
}
},
wordsCount(){
if(this.selectedNote){
var s = this.selectedNote.content;
s = s.replace(/\n/g,'')
s = s.replace(/(^\s*)|(\s*$)/gi,'')
s = s.replace(/\s\s+/gi,'')
return s.split(' ').length
}
},
charactersCount(){
if(this.selectedNote){
return this.selectedNote.content.split('').length
}
}
},
watch:{
notes:{
handler:'saveNote',
deep:true,
},
selectedId(v){
localStorage.setItem('selected-id',v)
}
},
filters:{
changeDate(v){
return moment(v).format('YYYY-MM-DD')
}
},
})
</script>
</body>
</html>
|