先看一下实现效果：
可以看到内部实现的内容有enter输入，单项删除，全选，以及删除选中项等功能
具体在实现前需要常见有ts的vue3项目
具体项目创建 就是 vue create 项目名称
在创建后，选择的时候有vue2和vue3的选择，第三项是自定义，在自定义时需要选中ts(选择的键分别是向下键和空格键)
在创建项目之后，先运行，查看是否可运行
目录结构：
运行文件：App.vue
组件：components下的文件
配置文件：utils types
文件内容按上述介绍展示：
App.vue
<template>
<div class="todo-container">
<div class="todo-wrap">
<Header :addTodo="addTodo"/>
<List :todos='todos' :deleteTodo="deleteTodo" :updateTodo="updateTodo"/>
<Footer :todos="todos" :checkAll="checkAll" :clearAllCompletedTodos="clearAllCompletedTodos"/>
</div>
</div>
</template>
<script lang='ts'>
import { defineComponent,reactive,toRefs,watch,onMounted } from 'vue'
// 引入直接的子集组件
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'
import {Todo } from './types/todo'
import {saveTodos, readTodos} from './utils/localStorageUtils'
export default defineComponent({
name:'App',
components: {
Header,
List,
Footer
},
// 数据存储为数组格式，数组内的为对象，对象中有三个属性（id, title, isSCompleted）
// 把数据定义到App.vue父级组件
setup(){
// 定义一个数组数据
// const state = reactive<{todos: Todo[]}>({
// todos: [
// {id: 1,title:'奔驰',isCompleted: false},
// {id: 2,title:'宝马',isCompleted: true},
// {id: 3,title:'奥迪',isCompleted: false},
// ]
// })
const state = reactive<{todos: Todo[]}>({
todos: []
})
// 界面加载完毕后再读取数据
onMounted(() => {
setTimeout(() => {
state.todos = readTodos()
},1000)
})
// 添加数据的方法
// eslint-disable-next-line
const addTodo = (todo:Todo) => {
state.todos.unshift(todo)
}
// 删除数据的方法
const deleteTodo = (index:number) =>{
state.todos.splice(index, 1)
}
// 修改todod的 isCompleted属性的状态
const updateTodo = (todo: Todo,isCompleted: boolean) => {
todo.isCompleted = isCompleted
console.log(todo);
}
// 全选或者全不选的方法
const checkAll = (isCompleted:boolean) => {
// 遍历数组
state.todos.forEach((todo) => {
todo.isCompleted = isCompleted
});
}
// 清理所有选中的数据
const clearAllCompletedTodos = () => {
state.todos = state.todos.filter(todo=>!todo.isCompleted)
}
// 监视操作：如果todos数组的数据变化了，直接存储到浏览器的缓存中
// watch(() => state.todos, (value)=> {
// // 保存到浏览器缓存中
// localStorage.setItem('todos_key',value)
// },{deep:true})
// watch(() => state.todos, (value)=> {
// // 保存到浏览器缓存中
// saveTodos(value)
// },{deep:true})
watch(() => state.todos, saveTodos, {deep:true})
return {
...toRefs(state),
addTodo,
deleteTodo,
updateTodo,
checkAll,
clearAllCompletedTodos
}
}
})
</script>
<style scoped>
.todo-container{
width: 600px;
margin: 0 auto;
}
.todo-container .todo-wrap{
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>components 下的 Header.vue
<template>
<div class="todo-header">
<input type="text" placeholder='请输入你的任务名称，按回车键确认' @keyup.enter='add' v-model='title'>
</div>
</template>
<script lang='ts'>
import { defineComponent,ref } from 'vue'
export default defineComponent({
name:'Header',
props: {
addTodo: {
type: Function,
required: true // 必须
}
},
setup(props){
// 定义一个ref类型的数据
const title = ref('')
// 回车的事件回调函数，用来添加数据
const add = () => {
// 获取文本框中输入的数据，判断不能为空
const text = title.value
if(!text.trim()) return
//此时有数据，创建一个todo对象
const todo = {
id: Date.now(),
title: text,
isCompleted: false
}
// 调用方法addTodo方法
props.addTodo(todo)
// 情况文本框
title.value = ''
}
return {
title,
add
}
}
})
</script>
<style scoped>
.todo-header input{
width: 560px;
height: 28px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 7px;
}
.todo-header input:focus{
outline: none;
border-color: rgba(82,168,236, 0.8);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
}
</style>components 下的 List.vue
<template>
<ul class="todo-main">
<Item v-for="(todo, index) in todos" :key="todo.id" :index="index" :todo='todo' :deleteTodo="deleteTodo" :updateTodo="updateTodo" />
</ul>
</template>
<script lang='ts'>
import { defineComponent } from 'vue'
import Item from './Item.vue'
export default defineComponent({
name:'List',
components: {
Item,
},
props: ['todos','deleteTodo','updateTodo']
})
</script>
<style scoped>
.todo-main{
margin-left: 0px;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0px;
}
.todo-empty{
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
</style>components 下的 Item.vue
<template>
<li @mouseenter="mouseHandler(true)" @mouseleave="mouseHandler(false)" :style="{backgroundColor:bgColor,color:myColor}">
<label>
<input type='checkbox' v-model='isCom'/>
<span>{{todo.title}}</span>
</label>
<button class='btn btn-danger' v-show="isShow" style='display;none' @click="delTodo">删除</button>
</li>
</template>
<script lang='ts'>
import { defineComponent,ref, computed } from 'vue'
import {Todo} from '../types/todo'
export default defineComponent({
name:'Item',
// props: {
// todo: Object as () => Todo // 函数返回的是Todo类型
// },
props: {
todo: {
type: Object as () => Todo, // 函数返回的是Todo类型
required: true
},
deleteTodo: {
type: Function,
required: true
},
index: {
type: Number,
required: true
},
updateTodo: {
type: Function,
required: true
}
},
data(){
return {
}
},
// computed: {
// isCom () {
// return this.todo.isCompleted
// }
// },
setup(props) {
const bgColor = ref('white')
const myColor = ref('black')
const isShow = ref(false)
// 鼠标进入和离开事件的回调函数
const mouseHandler = (flag: boolean) => {
if(flag){
// 鼠标进入
bgColor.value = 'pink'
myColor.value = 'white'
isShow.value = true
}else{
// 鼠标离开
bgColor.value = 'white'
myColor.value = 'black'
isShow.value = false
}
}
// 删除数据的方法
const delTodo = () => {
if(window.confirm('确定要删除吗？')){
props.deleteTodo(props.index)
}
}
// 计算属性方式---让当前复选框选中
const isCom = computed({
get(){
return props.todo.isCompleted
},
set(val){
props.updateTodo(props.todo, val)
}
})
return {
mouseHandler,
bgColor,
myColor,
isShow,
delTodo,
isCom
}
}
})
</script>
<style scoped>
li{
list-style:none;
height: 36px;
line-height: 36px;
padding: 0 5px;
border-bottom: 1px solid #ddd;
}
li label{
float: left;
cursor: pointer;
}
li label li input{
vertical-align:middle;
margin-right: 6px;
position: relative;
top: -1px;
}
li button{
float: right;
/* display: none; */
margin-top: 3px;
}
li:before{
content: initial;
}
li:last-child{
border-bottom: none;
}
</style>components 下的 Footer.vue
<template>
<div class="todo-footer">
<label>
<input type='checkbox' v-model="isCheckAll" />
</label>
<span><span>已完成{{count}}</span> /全部{{todos.length}} </span>
<button class='btn btn-danger' @click="clearAllCompletedTodos">清除已完成任务</button>
</div>
</template>
<script lang='ts'>
import { defineComponent,computed } from 'vue'
import {Todo} from '../types/todo'
export default defineComponent({
name:'Footer',
props: {
todos:{
type: Array as ()=> Todo[],
required: true
},
checkAll: {
type: Function,
required: true
},
clearAllCompletedTodos: {
type: Function,
required: true
}
},
setup(props){
// 已完成的计算属性操作
const count = computed(()=>{
return props.todos.reduce((pre,todo,index)=>pre+(todo.isCompleted?1:0),0)
})
const isCheckAll = computed({
get(){
return count.value>0&&props.todos.length===count.value
},
set(val){
props.checkAll(val)
}
})
return {
count,
isCheckAll
}
}
})
</script>
<style scoped>
.todo-footer{
height: 40px;
line-height: 40px;
padding-left: 6px;
margin-top: 5px;
}
.todo-footer label{
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
.todo-footer label input{
position: relative;
top: -1px;
vertical-align: middle;
margin-right: 5px;
}
.todo-footer button{
float: right;
margin-top: 5px;
}
</style>types 下的 todo.ts
// 定义一个接口，约束state的数据类型
export interface Todo{
id: number,
title: string,
isCompleted: boolean
}utils下的 localStorageUtils.ts
import {Todo} from '../types/todo'
// 保存数据到浏览器的缓存中
export function saveTodos(todos:Todo[]){
localStorage.setItem('todos_key',JSON.stringify(todos))
}
// 从浏览器缓存读取数据
export function readTodos():Todo[]{
return JSON.parse(localStorage.getItem('todos_key') || '[]')
}完
将 localStorageUtils.ts相关内容全部删除可正常使用！