IdeaTodo介绍

IdeaTodo是一款方便快速的TODO管理工具，可以帮助用户轻松地管理任务和提醒日程。下面我们从多个方面详细介绍IdeaTodo的功能和用法。

一、任务管理

示例代码：

<IdeaTodo :tasks="tasks"></IdeaTodo>

其中，tasks为任务列表数组，每个任务包括title、isComplete和id属性。具体示例如下：

task:
[ 
  {
    title: '完成IdeaTodo项目搭建',
    isComplete: false,
    id: 1
  },
  {
    title: '学习Vue.js',
    isComplete: false,
    id: 2
  },
  {
    title: '读完《JavaScript高级程序设计》',
    isComplete: true,
    id: 3
  },
]

IdeaTodo提供了完善的任务管理功能，可以对任务进行添加、编辑、标记完成、删除等操作。每个任务都包括标题、是否完成和一个唯一的ID。

通过点击“添加任务”按钮，可以弹出对话框，输入新的任务的标题并确认添加。任务列表可以通过简单的点击进行标记完成或取消标记。支持单个或多个任务的编辑和删除操作。此外，还可以通过搜索关键字和过滤条件等方式筛选任务。

二、日程提醒

示例代码：

<IdeaTodo :reminders="reminders"></IdeaTodo>

其中，reminder为提醒列表数组，每个提醒包括content、 time和id属性。具体示例如下：

reminders:
[ 
  {
    content: '约会时间到了',
    time: '2021/10/10 19:00',
    id: 1
  },
  {
    content: '和室友一起看电影',
    time: '2021/10/12 21:00',
    id: 2
  },
  {
    content: '吃药提醒',
    time: '2021/10/13 09:00',
    id: 3
  },
]

IdeaTodo还提供了日程提醒功能。用户可以在添加提醒的对话框中设置提醒内容和提醒时间，IdeaTodo会在提醒时间前10分钟弹出提醒框。

三、主题切换

示例代码：

<IdeaTodo dark></IdeaTodo>

可以在组件上添加dark属性，开启暗黑主题模式。具体实现代码如下：

<template>
  <div :class="{ 'ideatodo': true, 'dark': dark }">
    <!-- ... -->
  </div>
</template>
<script>
  export default {
    props: {
      dark: Boolean
    },
    // ...
  }
</script>
<style scoped>
  /* ... */
  .dark {
    background-color: #333;
    color: #fff;
  }
</style>

IdeaTodo支持主题切换功能，通过在组件上添加dark属性，即可开启暗黑主题模式。在样式中通过判断该属性来切换UI颜色样式。

四、数据存储

示例代码：

methods: {
  saveTask() {
    let tasks = JSON.stringify(this.tasks)
    localStorage.setItem('tasks', tasks)
  },
  saveReminder() {
    let reminders = JSON.stringify(this.reminders)
    localStorage.setItem('reminders', reminders)
  },
  getTasks() {
    let tasks = localStorage.getItem('tasks')
    this.tasks = JSON.parse(tasks) || []
  },
  getReminders() {
    let reminders = localStorage.getItem('reminders')
    this.reminders = JSON.parse(reminders) || []
  }
},
created() {
  this.getTasks()
  this.getReminders()
},
watch: {
  tasks: {
    handler() {
      this.saveTask()
    },
    deep: true
  },
  reminders: {
    handler() {
      this.saveReminder()
    },
    deep: true
  }
}

IdeaTodo通过localStorage来实现数据的存储和读取。通过watch深度监听任务列表和提醒列表的变化，使用stringify方法将其转化为JSON字符串并存储在localStorage中。

在组件被创建时，会自动从localStorage中获取数据并渲染到页面上。这样，即使用户关闭页面或浏览器，数据也可以得到保留。