Vue——组件化todolist

最新推荐文章于 2022-06-16 08:26:07 发布

Southern Wind

最新推荐文章于 2022-06-16 08:26:07 发布

阅读量668

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/nanchen_J/article/details/121331565

版权

Vue 专栏收录该内容

44 篇文章 11 订阅

订阅专栏

index部分

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" type="text/css" href="css/todolist.css" />
</head>

<body>
	<div id="app">
		<header>
			<form @submit.prevent='submit($event)'>
				<label for="inpTitle">ToDoList</label>
				<input type="text" id="inpTitle" placeholder="添加ToDo" required="required" />
			</form>
		</header>
		<section>
			<ullist title="正在进行" :local="local" :num="todonum" :flag="todoflag" @dellist="delitem"
				@editdatalist="editdataitem(arguments)" @changedatalist="changedataitem"></ullist>
			<ullist title="已完成" :local="local" :num="donenum" :flag="doneflag" @dellist="delitem"
				@editdatalist="editdataitem(arguments)" @changedatalist="changedataitem"></ullist>
		</section>
		<footer>
			<p>Copyright &copy; 2014 todolist.cn <a @click="clearLocal()">clear</a></p>
		</footer>
	</div>
	<template id="ullist">
		<div>
			<slot>
				<h2>{{title}}<span>{{num}}</span></h2>
				<ul>
					<li v-for="(item,index) in local" :key="index" v-if="item.todo===flag">
						<input type="checkbox" @change="changedata(index)" :checked="flag" />
						<input type="text" v-model="item.title" @blur="editdata($event,index)" />
						<a @click="del(index)">-</a>
					</li>
				</ul>
			</slot>
		</div>
	</template>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
	<script>
		const ullist = {
			template: '#ullist',
			props: {
				title: {
					type: String
				},
				local: {
					type: Array
				},
				flag: {
					type: Boolean,
					default: false
				},
				num: {
					type: Number,
					default: 0
				}
			},
			methods: {
				del(index) {
					this.$emit('dellist', index)
				},
				editdata(e, index) {
					this.$emit('editdatalist', e, index)
				},
				changedata(index) {
					this.$emit('changedatalist', index)
				}
			}
		}
	</script>
	<script src="js/todolist.js"></script>
</body>

</html>

css部分：

*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	cursor: pointer;
}
li{
	list-style: none;
}
body{
	background-color: #CDCDCD;
}
header{
	width: 100%;
	height: 50px;
	background-color: #323232;
}
header form{
	width: 620px;
	height: 50px;
	margin: 0 auto;
}
form label{
	color: #DDDDDD;
	font-size: 24px;
	line-height: 50px;
	cursor: pointer;
}
form input{
	width: 364px;
	height: 26px;
	outline: 0;
	padding-left: 10px;
	box-sizing: border-box;
	border-radius: 5px;
	background-color: #FFFFFF;
	float: right;
	margin-top: 12px;
	border: none;
	box-shadow: 0 1px 0 rgb(255 255 255 / 24%), 0 1px 6px rgb(0 0 0 / 45%) inset;
}
section{
	width: 620px;
	padding: 0px 10px;
	box-sizing: border-box;
	margin: 0 auto;
}
section h2{
	margin: 20px 0px;
}
section h2 span{
	display: inline-block;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: #666666;
	font-size: 14px;
	background-color: #E6E6FA;
	padding: 0px 5px;
	border-radius: 20px;
	float: right;
	margin-top: 6px;
}

section ul li{
	height: 32px;
	background-color: #FFFFFF;
	border-left: 5px solid #629A9C;
	line-height: 32px;
	margin-bottom: 10px;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgb(0 0 0 / 7%);
	padding: 0px 45px;
	position: relative;
}
section ul li p{
	margin: 0 auto;
	height: 32px;
}
section ul li>input:nth-of-type(1){
	width: 22px;
	height: 22px;
	position: absolute;
	top: 50%;
	left: 12px;
	margin-top: -11px;
}
section ul li>input:nth-of-type(2){
	width: 100%;
	height: 90%;
	box-sizing: border-box;
	border: none;
	font-size: 16px;
}
section ul li>input:nth-of-type(2):focus{
	outline: 1px solid #333333;
	padding-left: 5px;
}
section ul li a{
	display: block;
	width: 26px;
	height: 24px;
	line-height: 12px;
	text-align: center;
	box-sizing: border-box;
	border-radius: 14px;
	border: 6px double #FFF;
	background: #CCC;
	color: #FFFFFF;
	font-weight: 700;
	position: absolute;
	top: 50%;
	right: 12px;
	margin-top: -12px;
}

footer{
	color: #666666;
	font-size: 14px;
	text-align: center;
}
footer a{
	color: #999999;
}

JS部分

const app = new Vue({
	el: '#app',
	data() {
		return {
			local: [],
			todoflag: false,
			doneflag: true,
			todonum: 0,
			donenum: 0
		}
	},
	components: {
		ullist
	},
	methods: {
		submit(e) {
			console.log(e.target[0].value);
			let newtodo = {
				"title": e.target[0].value,
				"todo": false
			}
			e.target[0].value = ''
			//点击回车增加数据
			this.local.unshift(newtodo)
			//存储数据
			this.savedata()
			this.count()
		},
		//存储数据
		savedata() {
			window.localStorage.setItem('todo', JSON.stringify(this.local))
		},
		//删除数据
		delitem(index) {
			//删除点击的某一项
			this.local.splice(index, 1)
			//存储数据
			this.savedata()
			this.count()
		},
		//编辑数据
		editdataitem(e) {
			console.log(e[0]); //代表点击某一项失焦事件
			console.log(e[1]); //索引
			var index = e[1]
			this.local[index].title = e[0].target.value
			//存储数据
			this.savedata()
		},
		//切换数据
		changedataitem(index) {
			console.log(index);
			this.local[index].todo ? this.local[index].todo = false : this.local[index].todo = true,
				//存储数据
				this.savedata()
			this.count()
		},
		//数据个数
		count() {
			this.donenum = 0;
			this.todonum = 0;
			this.local.forEach((v, index) => {
				v.todo ? this.donenum++ : this.todonum++
			})
		}
	},
	created() {
		let data = window.localStorage.getItem('todo')
		if (data != null) {
			console.log(JSON.parse(data));
			this.local = JSON.parse(data)
			this.count()
		} else {
			this.local = []
		}
	}


})