elementui todolist
使用Element UI实现TodoList
Element UI提供了丰富的组件，可以快速搭建一个TodoList应用。以下是一个基于Element UI的TodoList实现方法。
安装Element UI
确保项目中已经安装Element UI。可以通过npm或yarn安装：
npm install element-ui或
yarn add element-ui引入Element UI
在项目的入口文件（如main.js）中引入Element UI：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);实现TodoList组件
创建一个TodoList组件，使用Element UI的el-input、el-button、el-checkbox和el-card等组件。
<template>
<div class="todo-list">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Todo List</span>
</div>
<el-input
v-model="newTodo"
placeholder="请输入任务"
@keyup.enter.native="addTodo"
></el-input>
<el-button type="primary" @click="addTodo">添加</el-button>
<ul>
<li v-for="(todo, index) in todos" :key="index">
<el-checkbox v-model="todo.completed"></el-checkbox>
<span :class="{ 'completed': todo.completed }">{{ todo.text }}</span>
<el-button type="danger" size="mini" @click="removeTodo(index)">删除</el-button>
</li>
</ul>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: []
};
},
methods: {
addTodo() {
if (this.newTodo.trim() === '') return;
this.todos.push({
text: this.newTodo,
completed: false
});
this.newTodo = '';
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
};
</script>
<style>
.todo-list {
max-width: 600px;
margin: 0 auto;
}
.completed {
text-decoration: line-through;
color: #999;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
align-items: center;
margin: 10px 0;
}
</style>功能说明
- 添加任务：在输入框中输入任务内容，按回车键或点击“添加”按钮即可添加任务。
- 标记完成：勾选复选框可以标记任务为完成状态，任务文本会显示为删除线。
- 删除任务：点击“删除”按钮可以移除任务。
扩展功能
如果需要更复杂的功能，可以结合Element UI的其他组件进行扩展：
- 使用
el-dialog实现任务编辑功能。 - 使用
el-tag为任务添加标签分类。 - 使用
el-date-picker为任务设置截止日期。
注意事项
- 确保Vue项目已经正确配置。
- 可以根据需求调整样式和布局。
- 如果需要持久化存储，可以结合
localStorage或后端API实现。
