<template>
<div class="common-layout">
<el-container>
<el-header>TODOLIST</el-header>
<el-main>
<div> 共有{{list.length}}个任务，完成的{{finish.length}}件</div>
<div class="listWarp">
<div>未完成的列表</div>
<ul class="warp">
<div v-for="(item,index) in list" :key="index" >
<li class="item" v-if='!item.checked' >
<el-checkbox v-model="item.checked" ></el-checkbox>
<div @dblclick="edit(item,index)" v-if="!item.isEdit">{{item.text}}</div>
<el-input v-else v-model="inputValue" size="mini" @blur="editEnter(item,index)"/>
<el-icon :size="15" >
<Close @click="del(index)"/>
</el-icon>
</li>
</div>
</ul>
</div>
<div class="listWarp">
<div>完成的列表</div>
<ul class="warp" >
<li class="item" v-for="(item,index) in finish" :key="'finished' + index" >
<el-checkbox v-model="item.checked" :disabled='true'></el-checkbox>
<div>{{item.text}}</div>
</li>
</ul>
</div>
<div class="listWarp">
<div class="warp">
<div>添加新任务</div>
<el-input v-model="input" placeholder="请输入新任务" />
<el-button type="primary" @click="add" >
添加
<el-icon class="el-icon--right">
<Plus />
</el-icon>
</el-button>
</div>
</div>
</el-main>
</el-container>
</div>
</template>
<script>
import { ref,reactive,toRefs,computed } from "vue";
import { Close,Plus } from '@element-plus/icons'
import { ElMessage } from 'element-plus'
export default {
components: {
Close,
Plus,
},
setup(props,ctx) {
console.log(props, ctx ,'上下文')
const input = ref('')
const inputValue = ref('')
const curIndex = ref(0)
const dataList = reactive({
list:[{
checked:false,
text:'萝卜',
isEdit:false
},{
checked:false,
text:'白菜',
isEdit:false
}
],
finish:computed(()=>
dataList.list.filter((item)=>
{ return item.checked == true}
))
})
const add=()=>{
if(input.value ==''){
ElMessage.warning("新任务不能为空！");
} else{
dataList.list.push({
checked:false,
text:input.value,
isEdit:false
})
ElMessage.success("添加成功！");
input.value = ''
}
}
const del=(index)=>{
dataList.list.splice(index,1)
}
const edit =(item,index)=>{
item.isEdit = true
inputValue.value = item.text
curIndex.value = index
}
const editEnter=(item)=>{
dataList.list[curIndex.value]={
text:inputValue.value,
checked:false,
isEdit:false
}
}
return {
...toRefs(dataList),
input,
add,
del,
edit,
inputValue,
editEnter
}
}
}
</script>
<style lang="less">
.el-header{
background-color: #cccccc;
line-height: 60px;
}
.el-main{
background-color: aliceblue;
height: 600px;
}
.el-input{
margin: 10px 0 10px 20px
}
.listWarp{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.warp{
list-style: none;
width: 400px;
.item{
height: 30px;
padding: 0 10px ;
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #cccccc
}
}
</style>
