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中獲取數據並渲染到頁面上。這樣，即使用戶關閉頁面或瀏覽器，數據也可以得到保留。