布局与样式
一个TodoList长什么样子相信无需多言:
上样式:
src/TodoList.css
.td-wrapper {
width: 700px;
margin: 0 auto;
}
.dp-wrapper {
width: 100%;
height: 40px;
display: flex;
margin-top: 10px;
}
.dp-wrapper input {
flex: 4;
height: 36px;
line-height: 36px;
text-indent: 10px;
font-size: 1rem;
}
.dp-wrapper button {
flex: 1;
height: 100%;
margin-left: 2px;
font-size: 1rem;
}
.dl-wrapper {
border: 1px solid gray;
margin-top: 5px;
}
.dl-wrapper li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid gray;
}
.dl-wrapper li.done {
text-decoration: line-through;
}
.dl-wrapper li:last-child {
border-bottom: none;
}
创建工程
npm init vite@latest
后续选择:react + ts
添加必要文件,工程结构如下:
定义全局数据类型
src/vite-env.d.ts
/// <reference types="vite/client" />
/* 代办事项数据结构 */
interface TodoItem {
name: string,
done: boolean
}
/* 通用DOM事件处理器 */