-
Notifications
You must be signed in to change notification settings - Fork 1
/
planList.html
436 lines (384 loc) · 11.3 KB
/
planList.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToDoList</title>
<style>
body {
margin:0;
background-color: #fafafa;
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h2{
margin:0;
font-size: 12px;
}
a {
color: #000;
text-decoration: none;
}
input {
outline: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
outline: 0;
}
ul {
padding:0;
margin:0;
list-style: none;
}
.page-top {
width: 100%;
height: 40px;
background-color: #db4c3f;
}
.page-content {
width: 50%;
margin: 0px auto;
}
.page-content h2{
line-height: 40px;
font-size: 18px;
color: #fff;
}
.main {
width: 50%;
margin: 0px auto;
box-sizing:border-box;
}
.task-input {
width: 99%;
height:30px;
outline: 0;
border: 1px solid #ccc;
}
.task-count{
display: flex;
margin:10px 0;
}
.task-count li {
padding-left: 10px;
flex: 1;
color: #dd4b39;
}
.task-count li:nth-child(1){
padding: 5px 0 0 10px;
}
.action {
text-align: center;
display: flex;
}
.action a {
margin: 0px 10px;
flex: 1;
padding: 5px 0;
color: #777;
}
.action a:nth-child(3){
margin-right: 0;
}
.active {
border: 1px solid rgba(175, 47, 47, 0.2);
}
.tasks {
background-color: #fff;
}
.no-task-tip {
padding:10px 0 10px 10px;
display: block;
border-bottom: 1px solid #ededed;
color:#777;
}
.big-title {
color: #222;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.todo-list li {
position: relative;
font-size: 16px;
border-bottom: 1px solid #ededed;
}
.todo-list li:hover {
background-color: #fafafa;
}
.todo-list li.editing {
border-bottom: none;
padding: 0;
}
.todo-list li.editing .edit {
display: block;
width: 506px;
padding: 13px 17px 12px 17px;
margin: 0 0 0 43px;
}
.todo-list li.editing .view {
display: none;
}
.todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 5px;
bottom: 0;
margin: auto 0;
border: none; /* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
.toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 5px;
bottom: 0;
margin: auto 0;
border: none; /* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
.toggle:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}
.toggle:checked:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}
.todo-list li label {
white-space: pre-line;
word-break: break-all;
padding: 15px 60px 15px 15px;
margin-left: 45px;
display: block;
line-height: 1.2;
transition: color 0.4s;
}
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
/*.tip-toggle {
padding-left: 0;
position: relative;
}
.tip-toggle .toggle {
top: -2px;
}
.tip-toggle span {
margin-left: 45px;
}*/
.todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
margin-bottom: 11px;
transition: color 0.2s ease-out;
}
.todo-list li .destroy:hover {
color: #af5b5e;
}
.todo-list li .destroy:after {
content: '×';
}
.todo-list li:hover .destroy {
display: block;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing:last-child {
margin-bottom: -1px;
}
</style>
<script src = "vue.min.js"></script>
</head>
<body>
<div class="page-top">
<div class="page-content">
<h2>任务计划列表</h2>
</div>
</div>
<div class="main">
<h3 class="big-title">添加任务：</h3>
<input
type="text"
placehoder="例如：吃饭睡觉打豆豆；提示：+回车即可添加任务"
class="task-input"
v-model="todo" //根据表单控件的不同去监控不同的value值
v-on:keyup.enter="addTodo"
/>
<ul class="task-content" v-show="list.length">
<li>
{{noCheckedItem}}个任务未完成
</li>
<li class="action">
<a class="active" href="#all">所有任务</a>
<a href="#unfinished">未完成的任务</a>
<a href="#finished">完成的任务</a>
</li>
</ul>
<h3 class="big-title">任务列表：</h3>
<div class="tasks">
<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list">
<li class="todo" v-bind:class="{completed: item.isChecked,editing:item === edtorTodos}" v-for="item in filteredList"><!-- 渲染列表 --><!-- 由item in list改为filteredList -->
<div class="view">
<input type="checkbox" class="toggle" v-model="item.isChecked">
<label @dblclick = "edtorTodo(item)">{{item.title}}</label>
<button class="destroy" @click="deleteTodo(item)"></button>
</div>
<input
v-foucs="item === edtorTodos"
type="text"
class="edit"
v-model="item.title"
@blur="edtorTodoed(item)"
@keyup.enter = "edtorTodoed(item)"
@keyup.esc = "cancelTodo(item)"
/>
</li>
</ul>
</div>
</div>
<script>
//存取localStorage中的数据（通过封装一个方法）
var store = {
save(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
fetch(key){
return JSON.parse(localStorage.getItem(key)) || [];
}
}
//数据
//去除所有的值
var list = store.fetch("todolist-class");//从缓存中调用数据
/*var list = [{
title:"吃饭打豆豆",
isChecked:false //状态为false，为不选中 任务未完成
},
{
title:"妙味课堂",
isChecked:true //状态为true，为选中 任务完成
}];*/
//vm
var vm = new Vue({
el:".main",
data:{
list:list,
todo:'',
edtorTodos:'',//记录正在编辑的数据
beforeTitle:'',//记录正在编辑的数据的title
visibility:"all"//通过这个属性值的变化，结合hash对数据进行筛选，默认值是all
},
watch:{
/*list:function(){//监控list这个属性，当这个属性对应的值发生变化就会执行函数
store.save("todolist-class",this.list);//浅监控，监控不到list里面各个对象中属性的变化
}*/
list:{//这里list是个对象
handler:function(){
store.save("todolist-class",this.list);
},
deep:true //深度监控
}
},
computed:{
noCheckedItem:function(){
return this.list.filter(function(item){
return item.isChecked === false;
}).length;
},
filteredList:function(){//根据vm的visibility属性来过滤数据
//按三种情况过滤：all,finished,unfinished
var filter = {
all:function(){
return list;
},
finished:function(){
return list.filter(function(item){
return item.isChecked;
})
},
unfinished:function(){
return list.filter(function(item){
return !item.isChecked;
})
}
}//end filter
//考虑到手工改动url栏里hash值的情况，这里加入了判断：找到了过滤函数，就返回过滤后的数据，否则返回所有的数据
return filter[this.visibility] ? filter[this.visibility](list) : list;//这里写上(list)才能返回根据数据筛选的值
}
},
methods:{
addTodo(){//添加任务
/*{
title:
}*/
this.list.push({//往数组里添加任务，格式是个对象
title:this.todo,//事件处理函数中的this指向的是，当前这个根实例，即new Vue
isChecked:false
});
this.todo = '';
},
deleteTodo(todo){//删除任务
var index = this.list.indexOf(todo);
this.list.splice(index,1);
},
edtorTodo(todo){//编辑任务
//编辑任务的时候，记录一下编辑这条任务的title，方便在取消编辑的时候还能用到原来的title，写在数据中：beforeTitle
this.beforeTitle = todo.title;
this.edtorTodos = todo;
},
edtorTodoed(todo){//编辑完成后失去焦点
this.edtorTodos = '';
},
cancelTodo(todo){//取消编辑
todo.title = this.beforeTitle;
this.edtorTodoed(todo);
this.beforeTitle = '';//之前记录的值已经没用了，重新设为空
}
},//end methods
directives:{//自定义指令
"foucs":{
update(el,binding){//钩子函数
//console.log(el);
//console.log(binding);
if(binding.value){
el.focus();
}
}
}//end focus
}//end directives
});
function watchHashChange(){
var hash = window.location.hash.slice(1);//去掉#号
vm.visibility = hash;//拿到去了#的hash值后改变实例的visibility属性值
}
watchHashChange();//一开始调用一下
window.addEventListener("hashchange",watchHashChange);//hash改变时调用一下
</script>
</body>
</html>