说明
今天将介绍的是用vue写的一个小案例todolist。
效果展示
它可以实现信息的增加和删除、按条件选择展示在页面中等功能。
代码展示
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./font/iconfont.css" />
</head>
<body>
<div id="app">
<!-- 头部 -->
<div class="header">
<div class="left">
<i class="iconfont"></i>
</div>
<div class="mid">toDoList</div>
<div class="right" @click='showEditMask'>
<i class="iconfont"></i>
</div>
</div>
<!-- 内容部分 -->
<div class="content">
<div class="box" v-for='(item,index) of newTodos'>
<div class="info">{{item.task}}</div>
<div class="check" @click="changeFlag(index)" :class="{'checked':item.flag}">
<i class="iconfont"></i>
</div>
<div class="delete" @click='showDeleteTipsMask(index)'>
<i class="iconfont"></i>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="all" @click='checkedAll' :class="{'footer-checked':allFlag}">所有</div>
<div class="finish" @click='checkedFinish' :class="{'footer-checked':finishFlag}">完成</div>
<div class="unfinish" @click='checkedUnFinish' :class="{'footer-checked':UnFinishFlag}">未完成</div>
</div>
<!-- 添加信息弹出框 -->
<div class="edit-mask" v-show='editMaskFlag' @click.self="hideEditMask">
<div class="mask">
<input type="text" placeholder="请输入代办事项" v-model='inputBoxVal'/>
<div class="determine" @click='add'>确定</div>
<div class="cancel" @click='hideEditMask'>取消</div>
</div>
</div>
<!-- 删除信息弹出框 -->
<div class="edit-mask" v-show='deleteMaskFlag' @click.self="hideDeleteTipsMask">
<div class="mask">
<p>是否删除？</p>
<div class="determine" @click='remove(activeIndex)'>确定</div>
<div class="cancel" @click='hideDeleteTipsMask'>取消</div>
</div>
</div>
</div>
<script src="./lib/vue.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
}
/* 头部 */
.header {
height: 42px;
background-color: #f7f7f8;
line-height: 42px;
font-size: 20px;
}
.header > div {
float: left;
}
.header i {
color: blue;
font-size: 30px;
padding: 10px;
}
/* 中间部分 */
.mid {
width: 75%;
text-align: center;
}
/* 内容区域 */
.content {
min-height: 550px;
}
.box {
width: 356px;
height: 96px;
margin: 10px 0 0 30px;
border: 1px solid #cccccc;
position: relative;
}
.box i {
font-size: 20px;
}
/* 文字信息部分 */
.info {
position: fixed;
margin: 10px 0 0 10px;
}
/* 选中和删除按钮 */
.check,
.delete {
width: 35px;
height: 28px;
border-radius: 5px;
border: 1px solid #cccccc;
line-height: 28px;
text-align: center;
position: absolute;
right: 60px;
bottom: 10px;
}
.delete {
right: 10px;
color: red;
border-color: red;
}
/* 选中按钮处于选中状态 */
.checked{
color: white;
background-color: blue;
}
/* 底部 */
.footer {
background-color: #f7f7f8;
}
.all,
.finish,
.unfinish {
width: 60px;
height: 60px;
line-height: 60px;
border: 1px solid #cccccc;
border-radius: 50%;
font-size: 15px;
float: left;
text-align: center;
margin-left: 50px;
}
/* 底部按钮处于选中状态 */
.footer-checked{
color: #fff;
background-color: green;
}
/* 添加信息弹出框 */
.edit-mask {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.mask {
width: 90%;
height: 100px;
position: absolute;
border: 1px solid #ccc;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 20px;
}
.mask input{
width: 90%;
height: 30px;
border-radius: 10px;
margin-top: 10px;
color: #ccc;
}
.determine,
.cancel {
width: 50px;
height: 30px;
line-height: 30px;
border-radius: 10px;
text-align: center;
position: absolute;
color: white;
bottom: 10px;
left: 120px;
border: 1px solid #cccccc;
}
.determine{
background-color: #4cd964;
}
.cancel{
left: 200px;
background-color: #f6383a;
}
index.js
new Vue({
el: "#app",
data: {
editMaskFlag: false,
deleteMaskFlag: false,
activeIndex: 0,
inputBoxVal: "",
todos: [],
newTodos: [],
allFlag: true,
finishFlag: false,
UnFinishFlag: false,
},
methods: {
/**
* 显示添加信息弹出框
*/
showEditMask() {
this.editMaskFlag = true;
},
/**
* 隐藏添加信息弹出框
*/
hideEditMask() {
this.editMaskFlag = false;
},
/**
* 显示删除信息弹出框
*/
showDeleteTipsMask(index) {
this.deleteMaskFlag = true;
//将当前元素索引值赋给activeIndex
this.activeIndex = index;
},
/**
* 隐藏删除信息弹出框
*/
hideDeleteTipsMask() {
this.deleteMaskFlag = false;
},
/**
* 将数据保存在localStorage中
*/
setStore(name, data) {
localStorage.setItem(name, JSON.stringify(data));
},
/**
* 添加信息
*/
add() {
// 如果输入为空，提示用户
if (this.inputBoxVal == "") {
alert("输入不能为空");
}
// 将用户输入的信息存放在数组todos中
this.todos.push({
id: this.todos.length + 1,
task: this.inputBoxVal,
flag: false,
});
this.newTodos = this.todos;
// 将输入框清空
this.inputBoxVal = "";
// 隐藏添加信息弹出框
this.hideEditMask();
},
/**
* 删除信息
*/
remove(index) {
this.todos.splice(index, 1);
this.newTodos = this.todos;
this.hideDeleteTipsMask();
},
/**
* 改变当前一项的flag，来改变选中按钮的状态
*/
changeFlag(index) {
this.todos[index].flag = !this.todos[index].flag;
},
/**
* 点击所有按钮
*/
checkedAll() {
this.newTodos = this.todos;
this.allFlag = true;
this.finishFlag = false;
this.UnFinishFlag = false;
},
/**
* 点击完成按钮
*/
checkedFinish() {
this.newTodos = this.todos.filter((item) => item.flag);
this.allFlag = false;
this.finishFlag = true;
this.UnFinishFlag = false;
},
/**
* 点击未完成按钮
*/
checkedUnFinish() {
this.newTodos = this.todos.filter((item) => !item.flag);
this.allFlag = false;
this.finishFlag = false;
this.UnFinishFlag = true;
},
},
});
结语
由于代码目录比较多，上面只给出了部分代码。如果你想获取该案例的代码，请到我的github上去获取。希望能对您有帮助！