Skip to content

Commit bd7f17e

Browse files
yuyuabc1yuyuabc1
committed
完成项目
0 parents  commit bd7f17e

File tree

5 files changed

+11033
-0
lines changed

5 files changed

+11033
-0
lines changed

‎img/done.svg

Lines changed: 1 addition & 0 deletions
Loading

‎img/undone.svg

Lines changed: 1 addition & 0 deletions
Loading

‎index.html

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<script src="./vue.js"></script>
8+
<title>Document</title>
9+
<style>
10+
html,body{
11+
padding: 0;
12+
margin: 0;
13+
font: 14px 'Microsoft YaHei','Helvetica Neue', Helvetica, Arial, sans-serif;
14+
}
15+
16+
body{
17+
background-color: #f3f5f6;
18+
position: relative;
19+
}
20+
21+
.box{
22+
min-height: 600px;
23+
display: flex;
24+
justify-content: center;
25+
}
26+
27+
#todoBox{
28+
min-height: 400px;
29+
width: 600px;
30+
margin: 20px auto;
31+
}
32+
33+
.title{
34+
font-size: 100px;
35+
font-weight: bold;
36+
text-align: center;
37+
margin: 50px 0;
38+
color: rgba(175, 47, 47, 0.15);
39+
}
40+
41+
.new-todo{
42+
padding: 16px 16px 16px 60px;
43+
box-sizing: border-box;
44+
border: none;
45+
width:100%;
46+
font-size: 24px;
47+
font-family: inherit;
48+
font-weight: inherit;
49+
/* background: rgba(0, 0, 0, 0.003); */
50+
background:#ffffff;
51+
height: 60px;
52+
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
53+
}
54+
55+
/* .new-todo, .edit {
56+
position: relative;
57+
margin: 0;
58+
width: 100%;
59+
font-size: 24px;
60+
font-family: inherit;
61+
font-weight: inherit;
62+
line-height: 1.4em;
63+
border: 0;
64+
color: inherit;
65+
padding: 6px;
66+
border: 1px solid #999;
67+
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
68+
box-sizing: border-box;
69+
-webkit-font-smoothing: antialiased;
70+
-moz-osx-font-smoothing: grayscale;
71+
} */
72+
@media screen and (-webkit-min-device-pixel-ratio: 0) {
73+
.todo-list li .toggle {
74+
height: 40px;
75+
}
76+
}
77+
78+
@media screen and (-webkit-min-device-pixel-ratio: 0) {
79+
.toggle-all, .todo-list li .toggle {
80+
background: none;
81+
}
82+
}
83+
84+
.view{
85+
background: #ffffff;
86+
}
87+
88+
.todo-list{
89+
margin: 0;
90+
padding: 0;
91+
list-style: none;
92+
}
93+
94+
.todo-list li{
95+
position: relative;
96+
font-size: 24px;
97+
border-bottom: 1px solid #ededed;
98+
}
99+
100+
.todo-list li .toggle {
101+
text-align: center;
102+
width: 40px;
103+
height: auto;
104+
position: absolute;
105+
top: 0;
106+
bottom: 0;
107+
margin-top: 10px;
108+
margin-left: 4px;
109+
outline: none;
110+
border: none;
111+
-webkit-appearance: none;
112+
appearance: none;
113+
}
114+
115+
.done{
116+
color: #d9d9d9;
117+
text-decoration: line-through;
118+
}
119+
120+
/* .undone{
121+
color: black;
122+
text-decoration: none;
123+
} */
124+
125+
.todo-list li .toggle:checked:after {
126+
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="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
127+
}
128+
129+
.todo-list li .toggle:after{
130+
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="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
131+
}
132+
133+
.todo-list li label {
134+
word-break: break-all;
135+
padding: 15px 60px 15px 15px;
136+
margin-left: 45px;
137+
display: block;
138+
line-height: 1.2;
139+
transition: color 0.4s;
140+
}
141+
142+
.todo-list li .none{
143+
display: block;
144+
position: absolute;
145+
top: 0;
146+
right: 10px;
147+
bottom: 0;
148+
width: 40px;
149+
height: 40px;
150+
margin: auto 0;
151+
outline: none;
152+
font-size: 30px;
153+
color: #cc9a9a;
154+
background-color: #ffffff;
155+
border: none;
156+
margin-bottom: 11px;
157+
transition: color 0.2s ease-out;
158+
}
159+
160+
.todo-list li .none:hover{
161+
display: block;
162+
}
163+
164+
.todo-list li .none:after {
165+
content: '×';
166+
}
167+
168+
.activeBox{
169+
height: 60px;
170+
position: relative;
171+
background-color:#ffffff;
172+
box-sizing: border-box;
173+
font-size: 14px;
174+
font-family: inherit;
175+
font-weight: inherit;
176+
padding: 16px 25px;
177+
display: flex;
178+
align-items: center;
179+
}
180+
181+
.filter{
182+
list-style: none;
183+
}
184+
185+
.filter li{
186+
color: rgb(119,119,161);
187+
border-radius: 5px;
188+
margin-right: 20px;
189+
float: left;
190+
padding: 5px 8px;
191+
border: 1px solid #ffffff;
192+
}
193+
194+
.active{
195+
border: 1px solid rgba(175, 47, 47, 0.2);
196+
}
197+
198+
.filter li:hover{
199+
border: 1px solid rgba(175, 47, 47, 0.2);
200+
cursor: pointer;
201+
}
202+
203+
.clearBtn{
204+
position: absolute;
205+
right: 20px;
206+
cursor: pointer;
207+
}
208+
</style>
209+
</head>
210+
<body>
211+
<div class="box">
212+
<div id="todoBox">
213+
<section>
214+
<header>
215+
<h1 class="title">Todos</h1>
216+
<input class="new-todo edit" placeholder="你需要做些什么?" v-model="newTodo" @keyup.enter="submit">
217+
</header>
218+
</section>
219+
<section>
220+
<ul class="todo-list" v-for="(item,index) in filterTodolist">
221+
<li class="todo" @mouseover="show(index)" @mouseleave="none(index)">
222+
<div class="view">
223+
<input type="checkbox" class="toggle" @click="completed(index)">
224+
<label for="toggle" :class="[item.complete ? 'done':'undone']">{{item.text}}</label>
225+
<button class="none" v-if="item.delete" @click="deleteItem(index)"></button>
226+
</div>
227+
</li>
228+
</ul>
229+
</section>
230+
<section>
231+
<div class="activeBox" v-if="todolist.length > 0">
232+
<span> {{todolist.length}} 项待办事件</span>
233+
<ul class="filter">
234+
<li class="active" @click="filter('all')">全部</li>
235+
<li @click="filter('undone')">未完成</li>
236+
<li @click="filter('done')">已完成</li>
237+
</ul>
238+
<span class="clearBtn" @click="clear">全部清空</span>
239+
</div>
240+
</section>
241+
</div>
242+
<div>1</div>
243+
</div>
244+
</body>
245+
<script>
246+
new Vue({
247+
el:'#todoBox',
248+
data:{
249+
newTodo:'',
250+
active:'all',
251+
todolist:[]
252+
},
253+
mounted:function (){
254+
if (window.localStorage.todolist) {
255+
this.todolist = JSON.parse(window.localStorage.todolist);
256+
}
257+
},
258+
computed:{
259+
filterTodolist:function(){
260+
if (this.active === "undone") {
261+
return this.todolist.filter(function(element){
262+
return element.complete == false;
263+
})
264+
} else if (this.active === "done") {
265+
return this.todolist.filter(function(element){
266+
return element.complete == true;
267+
})
268+
}
269+
return this.todolist
270+
}
271+
},
272+
methods:{
273+
submit:function(){
274+
let newItem = {};
275+
newItem.delete = false;
276+
newItem.text = this.newTodo;
277+
newItem.complete = false;
278+
this.todolist.push(newItem);
279+
this.newTodo = '';
280+
console.log(JSON.stringify(this.todolist));
281+
console.log(this.todolist)
282+
localStorage.setItem('todolist',JSON.stringify(this.todolist));
283+
},
284+
show:function(index){
285+
this.todolist[index].delete = true;
286+
},
287+
none:function(index){
288+
this.todolist[index].delete = false;
289+
},
290+
completed:function(index){
291+
if (this.todolist[index].complete == true) {
292+
this.todolist[index].complete = false
293+
} else {
294+
this.todolist[index].complete = true
295+
}
296+
},
297+
deleteItem:function(index){
298+
this.todolist.splice(index,1);
299+
},
300+
filter:function(condition){
301+
console.log(condition)
302+
this.active = ''+condition;
303+
},
304+
clear:function(){
305+
this.todolist = [];
306+
}
307+
}
308+
})
309+
</script>
310+
</html>

‎package.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "todolist-vue",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "",
10+
"license": "ISC"
11+
}

0 commit comments

Comments
 (0)