Todolist 开发流程
-
选择框架 ：Vue.js
-
选择一个组件库
- ui库：
- bootstrap
- Amaze UI
- Framework7 :http://framework7.taobao.org/
- SUI
- 组件库:组件的集合体
- 组件是一个html css js img等的一个集合体
- ui库：
-
遇到的问题
-
卡片中的开关往哪里定义？
-
点击垃圾桶删除一条 —> 数组中删除一条？
数组删除的方法？
-
splice( index,删除的个数，添加的数据 )(√)
splice( index,1 )
-
-
利用事件冒泡来实现mask(遮幕)是否显示
-
tab选项卡效果切换
-
如果todos数据可以改变，点击tab选项卡就可以切换显示不用的内容
- 为什么要使用计算属性？
- 有逻辑，向全局变量一样直接使用
- 循环
- filter
以下是代码
html代码
- filter
- 为什么要使用计算属性？
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Todolist </title>
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="./css/todolist.css">
</head>
<body>
<div class="page-group">
<div class="page page-current">
<!-- header start -->
<header class="bar bar-nav">
<a class="icon icon-star pull-left"></a>
<a class="icon icon-edit pull-right" @click="inputFlag = true"></a>
<h1 class="title">Todolist-momo</h1>
</header>
<!-- header end -->
<!-- content start -->
<div class="content">
<input type="text" placeholder="请输入待办事项" v-model="val" v-show="inputFlag" @keyup.13="addTodos" @blur="inputFlag = false">
<div class="card" v-for="(item,index) in newTodos">
<div class="card-content">
<div class="card-content-inner">
<p>
{{ item.text }}
</p>
<div class="card-btn pull-right">
<button class="button button-success" @click="item.flag=!item.flag" :class="[item.flag && 'button-fill']"><i class="icon icon-check"></i></button>
<button class="button button-danger" @click="check(index)"><i class="icon icon-remove"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- content end -->
<!-- mask start -->
<div class="mask-wrap" v-show="maskFlag" @click="maskFlag = !maskFlag">
<div class="mask-bg"></div>
<div class="mask-content">
<p>您确定要删除未完成选项吗？</p>
<button class="button button-danger button-fill pull-right" @click="ensure(activeIndex)">确定</button>
</div>
</div>
<!-- mask end -->
<!-- tab-bar start -->
<footer class="tab-bar">
<ul>
<li class="circle" v-for="item in tabs" @click="type = item.text" :class="['circle-'+item.style,item.text === type && 'circle-fill']">
{{ item.text }}
</li>
</ul>
</footer>
<!-- tab-bar end -->
</div>
</div>
</body>
<script src="./lib/vue.js"></script>
<script src="./js/todolist.js"></script>
</html>
css代码
body,
ul,
p,
header,
footer,
input {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.content>input {
width: 100%;
background-color: #f7f7f8;
border: none;
padding: 10px;
}
.card-content {
padding-bottom: 20px;
}
.card-content-inner p {
margin-bottom: 10px;
}
.card-btn .button {
display: inline-block;
}
.mask-wrap {
width: 100%;
height: 100%;
position: relative;
z-index: 99;
}
.mask-bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
}
.mask-content {
position: absolute;
left: 50%;
top: 50%;
width: 80%;
/* height: 100px; */
transform: translateX(-50%) translateY(-50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .4);
}
.tab-bar {
position: fixed;
bottom: 20px;
left: 0;
width: 100%;
height: 80px;
}
.tab-bar ul {
height: 100%;
width: 100%;
display: flex;
justify-content: space-around;
text-align: center;
line-height: 80px;
}
//自定义css
.circle {
width: 80px;
height: 80px;
border: 1px solid #ccc;
border-radius: 50%;
}
.circle.circle-all {
border-color: #e728e7;
color: #e728e7;
}
.circle.circle-all.circle-fill {
background-color: #e728e7;
color: #fff;
}
.circle.circle-finished {
border-color: #48e728;
color: #48e728;
}
.circle.circle.circle-finished.circle-fill {
background-color: #48e728;
color: #fff;
}
.circle.circle-unfinished {
border-color: #e78428;
color: #e78428;
}
.circle.circle.circle-unfinished.circle-fill {
background-color: #e78428;
color: #fff;
}
js代码
new Vue({
el: '.page-group',
data: {
todos: [{
id: 1,
text: '周六打扫卫生',
flag: false
},
{
id: 2,
text: '周末同学聚会',
flag: false
}
],
activeIndex: 0,
val: '',
inputFlag: false, //设置输入框是否显示的开关
maskFlag: false, //设置遮幕是否显示的开关
type: 'A',
tabs: [{
id: 1,
text: 'A',
style: 'all'
},
{
id: 2,
text: 'F',
style: 'finished'
},
{
id: 3,
text: 'U',
style: 'unfinished'
}
]
},
methods: {
addTodos() { //输入框添加事件
this.todos.push({
id: this.todos.length + 1,
text: this.val,
flag: false
});
this.inputFlag = false;
this.val = '';
},
check(i) { //判断用户事项完成情况
if (this.todos[i].flag) { //已经完成，直接删除
this.remove(i);
} else { //未完成，需要弹出用户友好提示
this.maskFlag = true;
this.activeIndex = i;
}
},
remove(i) { //点击删除按钮的事件
this.todos.splice(i, 1);
},
ensure(i) {
this.remove(i);
}
},
computed: {
newTodos() {
switch (this.type) {
case 'A':
return this.todos;
break;
case 'F':
return this.todos.filter(item => item.flag && item);
break;
case 'U':
return this.todos.filter(item => !item.flag && item);
break;
}
}
}
})
