<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件-todolist</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#app {
width: 400px;
margin: 0 auto;
margin-top: 100px;
padding: 12px;
border: 1px solid rgb(176, 193, 228);
background-color: rgb(176, 193, 228);
color: white;
box-shadow: 10px 10px 10px rgb(171, 174, 182);
}
.head {
padding: 12px;
}
.input {
margin-right: 20px;
height: 25px;
border-radius: 4px;
width: 260px;
}
p {
margin-top: 10px;
color: rgb(95, 95, 218);
font-size: 16px;
text-align: center;
}
.title {
text-align: center;
font-size: 20px;
color: rgb(95, 95, 218);
}
button {
color: rgb(118, 118, 228);
float: right;
border-radius: 4px;
border: 1px solid white;
width: 40px;
height: 25px;
margin-top: -16px;
margin-right: 6px;
}
.list {
padding: 12px;
border-bottom: 1px solid #eee;
}
.text {
font-size: 14px;
color: white;
}
.line-through {
text-decoration: line-through;
}
.add {
background-color: rgb(71, 95, 231);
color: white;
margin-top: 2px;
}
</style>
</head>
<body>
<div id="app">
<top @addclick="addBtn" v-model="message"></top>
<p><strong>未完成列表</strong></p>
<middle v-for="(item, index) in todoList" @combtnclick="comBtn" @deletebtnto="deleteBtnTo" :item="item"
:index="index"></middle>
<p><strong>完成列表</strong></p>
<foot v-for="(item, index) in completeList" @comdeletebtnto="deleteBtnCom" :item="item" :index="index"></foot>
</div>
<script type="module">
import {myComponentName1,myComponentName2,myComponentName3 } from "./js/2.js";
Vue.component("top", myComponentName1);
Vue.component("middle", myComponentName2);
Vue.component("foot", myComponentName3);
let app = new Vue({
el: "#app",
data: {
message: "",
todoList: [],
completeList: []
},
// 初始化列表,从本地存储里面拿数据
created() {
if (localStorage.getItem("todolist")) {
this.todoList = JSON.parse(localStorage.getItem("todolist"));
}
if (localStorage.getItem("completelist")) {
this.completeList = JSON.parse(localStorage.getItem("completelist"));
}
},
methods: {
addBtn() {
// 不为空
if (this.message != "") {
// 不为空 且 不存在
if ((this.todoList).indexOf(this.message.trim()) == -1) {
this.todoList.push(this.message.trim());
}
else {
alert("输入内容不能重复!");
}
}
else {
alert("输入内容不能为空");
}
this.message = "";
},
// 删除 未完成
deleteBtnTo(index) {
this.todoList.splice(index, 1);
this.refreshTodoList();
},
// 完成 未完成
comBtn(index) {
this.completeList = this.completeList.concat(this.todoList.splice(index, 1));
this.refreshTodoList();
this.refreshCompleteList();
},
// 删除 完成列表
deleteBtnCom(index) {
this.completeList.splice(index, 1);
this.refreshCompleteList();
},
// 刷新本地存储 未完成列表
refreshTodoList() {
window.localStorage.setItem("todolist", JSON.stringify(this.todoList));
},
// 刷新本地存储 完成列表
refreshCompleteList() {
window.localStorage.setItem("completelist", JSON.stringify(this.completeList));
}
}
})
</script>
</body>
</html>