这个todolist使用三个部分:
HTML页面使用了SUI的Moblie的组件
js需要下载vue.js的源文件
HTML部分代码:
css代码:
*{
margin:0;
padding:0;
list-style: none;
}
section{
padding-top:54px;
}
.card-content{
overflow: hidden;
padding:10px;
}
.card-content button{
margin-left:10px;
}
.mask{
width: 100%;
height: 100%;
}
.mask-bg{
position: fixed;
top:0;
left: 0;
z-index:99;
width: 100%;
height: 100%;
background:rgba(204, 204, 204, 0.582);
}
.mask-content{
width:80%;
height: 130px;
background:white;
position: absolute;
left:50%;
margin-left:-40%;
top:50%;
margin-top:-65px;
z-index: 100;
border-radius: 10px;
}
.mask-content p{
padding:10px;
}
.mask-content button{
margin-right:20px;
margin-bottom:5px;
}
footer ul{
display: flex;
justify-content: space-around;
position: absolute;
bottom:20px;
width: 100%;
}
footer ul li .button{
width:80px;
height: 80px;
border-radius: 50%;
line-height: 80px;
text-align: center;
}
js的Vuejs代码
new Vue({
el:'#app',
data:{
Tflag:true,//输入框的判断
val:'',
Xflag:true,//勾选框的判断
todos:[{//生成的卡片是输入框数组
id:1,
title:'任务一',
Xflag:true,
},{
id:2,
title:'任务二',
Xflag:true,
}],
Sflag:false,//勾选框是否勾中的判断
btns:[{
txt:'A',
Bflag:true,//按钮的判断
style:'success'
},{
txt:'F',
Bflag:true,
style:'warning'
},{
txt:'U',
Bflag:true,
style:'danger'
}],
type:"A",
},
methods: {
hide(){//对输入框的隐藏
this.Tflag=!this.Tflag;
},
send(val){//输入框进行生成卡片
this.todos.push({//利用todos的数据形式,来把数据push进去
id:this.todos.length+1,
title:val,
Xflag:true,
});
this.val='';//清空输入框
this.Tflag=!this.Tflag;//隐藏输入框
},
del(index){//弹框的删除
this.todos.splice(index,1)
},
show(index){//直接删除提示,删除根据勾选框进行判断
if(this.todos[index].Xflag===false){
this.Sflag=!this.Sflag;
}else{
this.todos.splice(index,1)
}
},
select(index){//点击勾选框进行判断是否选中
this.todos[index].Xflag=!this.todos[index].Xflag;
}
},
computed: {
alltodos(){//点击all按钮返回所有的值
return this.todos
},
finish(){//点击finish按钮返回完成任务的所有值Xflag是勾选框的判断
return this.todos.filter(item=>item.Xflag&&item)
},
unfinish(){
return this.todos.filter(item=>!item.Xflag&&item)//遍历数组然后返回点击的相应值
},
newTodos(){//将原来的todos数据写成可变的,点击下面的按钮可以将每个部分的数据分开
switch(this.type){
case "A":
return this.alltodos;
break;
case "F":
return this.finish;
break;
case "U":
return this.unfinish;
break;
}
},
},
})