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实现。