console
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://unpkg.com/vue@next">
</script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/element-plus">
</script>
<title>Element Plus demo</title>
</head>
<body>
<div id="app">
<div class="common-layout">
<el-container>
<el-container>
<el-header>todolist</el-header>
<el-main>
<search @search-obj="getSearchObj"></search>
<middle @change-obj-item="changeObjItem" @del-obj-item="delObjItem" v-for="item in searchObj" :id="item.id" :title="item.title" :done="item.done">
<middle/>
</el-main>
<el-footer>
<foot></foot>
</el-footer>
</el-container>
</el-container>
</div>
<script>
const App = {
data() {
return {
searchObj:[
{id:'001',title:'抽烟',done:true},
{id:'002',title:'喝酒',done:false},
{id:'003',title:'开车',done:true}
]
};
},
methods:{
getSearchObj(obj){
this.searchObj.unshift(obj)
},
delObjItem(obj){
this.searchObj = this.searchObj.filter(searchObj => {
return searchObj.id !== obj
});
changeObjItem(obj){
this.searchObj = this.searchObj.filter(searchObj => {
return searchObj.id !== obj
});
}
}
};
const app = Vue.createApp(App);
app.component('search', {
emits:['search-obj'],
data() {
return {
title: ""
}
},
methods:{
search(){
if(this.title.trim()==''){return alert('输入不能为空')}
let searchObj={id:new Date().getTime(),title:this.title,done:false}
this.$emit("search-obj", searchObj);
}
},
template:`<el-row>
<el-input v-model='title' @keyup.enter.native='search' placeholder='输入任务名称，回车添加' />
</el-row>`
});
app.component('middle', {
emits:['del-obj-item',"change-obj-item"],
methods:{
del(){
this.$emit("del-obj-item",this.id)
},
change(){
this.$emit("change-obj-item",this.id)
}
},
template:`<el-row style="justify-content: space-between;">
<el-checkbox v-model="done" :id="id" @click="change" :label="title"></el-checkbox>
<el-button style="float:right" :id="id" @click="del">删除</el-button>
</el-row>`,
props:['id','title','done']
})
app.component('foot', {
template:`<el-row style="justify-content: space-between;padding-top:14px;">
<el-checkbox v-model="checked1" label="已完成"></el-checkbox>
<el-button style="" >清除已完成任务</el-button>
</el-row>`,
})
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
.el-header,
.el-footer {
background-color: #b3c0d1;
color: var(--el-text-color-primary);
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #d3dce6;
color: var(--el-text-color-primary);
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #e9eef3;
color: var(--el-text-color-primary);
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}