-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
69 lines (69 loc) · 2.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<style> [v-cloak] { display: none; } </style>
</head>
<body>
<div class="header">
<div class="title">笔记本</div>
</div>
<div class="content">
<div class="catalog">
<ul class="list">
<li class="item" v-for="catalog in catalogs.catalogs | orderBy 'id' 1" @click="taskOfCatalogId = catalog.id" :class="{active: catalog.id == taskOfCatalogId}">
{{ catalog.name }}
({{ tasks[catalog.id].length}})
<label @click="removeCatalog(catalog)" class="delete">×</label>
</li>
</ul>
<div class="add" v-on:click="toggleModel">
新增分类
</div>
</div>
<div class="task">
<div class="list">
<div class="item" v-for="task in tasks[taskOfCatalogId]" @click="editTask = task" :class="{active: task == editTask || task.title == editTask.title}" v-text="task.title">
<div class="date" v-text="task.updateTime">
</div>
</div>
</div>
<div class="add" @click="toggleTaskPanel">
新增笔记
</div>
</div>
<div class="detail">
<div class="detail-box">
<div class="detail-title" :class="{editing: editable}">
<div class="btns">
<a class="btn btn-edit" @click="editable = true" v-show="!editable">编辑</a>
<a class="btn btn-delete" @click="removeTask" v-show="!editable">删除</a>
<a class="btn btn-save" @click="saveTask" v-show="editable">保存</a>
</div>
<div class="note-text" contenteditable="{{ editable }}" v-text="editTask.title">
</div>
</div>
<div class="detail-date" :class="{editing: editable}">
<div v-show="editTask.createTime" v-cloak>
创建于: {{ editTask.createTime }}
更新于:{{ editTask.updateTime }}
</div>
</div>
<div class="edit-content" :class="{editing: editable}" contenteditable="{{ editable }}" v-html="editTask.content">
</div>
</div>
</div>
</div>
<div class="model" v-show="model" v-cloak>
<div class="model-body">
<input type="text" v-model="newCatalog" v-on:keyup.enter="addCatalog" placeholder="输入分类名">
<a class="btn" v-on:click="addCatalog">提交</a>
</div>
</div>
<script src="js/vue.js"></script>
<script src="js/storage.js"></script>
<script src="js/note.js"></script>
</body>
</html>