vue小案例-todolist

说明今天将介绍的是用vue写的一个小案例todolist。效果展示它可以实现信息的增加和删除、按条件选择展示在页面中等功能。代码展示index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width

我有一个梦！

2234人浏览 · 2020-06-29 12:50:38

我有一个梦！ · 2020-06-29 12:50:38 发布

说明

今天将介绍的是用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">&#xe620;</i>
				</div>
				<div class="mid">toDoList</div>
				<div class="right" @click='showEditMask'>
					<i class="iconfont">&#xe616;</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">&#xe61b;</i>
					</div>
					<div class="delete" @click='showDeleteTipsMask(index)'>
						<i class="iconfont">&#xe617;</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;
		},
	},
});