# chrome-plugin-todo-list

**Repository Path**: cpranmo/chrome-plugin-todo-list

## Basic Information

- **Project Name**: chrome-plugin-todo-list
- **Description**: 使用 vue3 制作谷歌插件实现本地化的任务清单管理工具
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-17
- **Last Updated**: 2023-03-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <a href="https://www.npmjs.com/package/vue">
    <img src="https://img.shields.io/badge/version-1.0.0-blue" alt="version"> 
  </a>
  <a href="https://www.npmjs.com/package/vue">
    <img src="https://img.shields.io/badge/vue-%5E3.2.25-green" alt="vue version">
  </a>
   <a href="https://www.npmjs.com/package/vue">
    <img src="https://img.shields.io/badge/npm-v8.1.0-blue" alt="vue version">
  </a>
</p>
<br/>

# 任务清单 ✅

> 一个本地化的任务清单管理工具(可以在浏览器中正常使用亦可以谷歌插件使用)

- ⚡️ 本地持久化管理，无需等待网络延迟
- ⏰ 实时角标提醒待完成任务数量
- 🎉 任务自定义拖拽排列
- ⬇️ 任务完成，自动排后
- ✍️ 快速编辑任务内容
- 🧹 一键清空任务
- 🛠️ 实现自定义标题

## 技术栈

> `vue3` + `element-plus` + `vuedraggable`

## 开发目的

掌握谷歌插件开发流程，使用 `vue3` 体验 `Composition api` 代码开发风格规范，项目虽小，但是五脏六腑俱全。能快速的带你体验不一样的开发过程。

## 使用

### 1. 下载

[gitee](https://gitee.com/cpranmo/chrome-plugin-todo-list)

### 2、安装

直接将克隆代码下来进行打包，然后根据你的需要选择浏览器上运行还是选择当成谷歌插件运行都行，

安装插件，点击右上角的扩展图标，然后点击固定按钮，就可以在插件栏显示了。

<p align="center">
  <img width="450" src="https://user-images.githubusercontent.com/38695411/184520073-c08a6884-bf63-4a53-b384-921085fe1c11.png" alt="ToDo List">
</p>

### 3、自定义标题

可在最上方输入自定义标题文字。

<p align="center">
  <img width="450" src="https://user-images.githubusercontent.com/38695411/184520162-bfe98c06-6c11-4ce1-b9f8-70beb932a7b0.png" alt="ToDo List">
</p>

### 4、添加编辑任务事项

点击添加任务事项的按钮，添加你的第一个任务事项。输入任务事项，输入框失焦后则创建完成。（如有需要，可以双击任务事项可进行再次编辑）

<p align="center">
  <img width="450" src="https://user-images.githubusercontent.com/38695411/184520212-122a0fe0-15b6-4d26-9be8-cdff9a0212f8.png" alt="ToDo List">
  <img width="450" src="https://user-images.githubusercontent.com/38695411/184520226-fbdf893b-3975-41b9-a145-d22d0627e6c8.png" alt="ToDo List">
</p>

### 5、拖动排序

我们可通过将鼠标放在任务事项点击拖动进行任务排序。

<p align="center">
  <img width="450" src="https://user-images.githubusercontent.com/38695411/184520292-8ddcfe36-1760-41c0-87b0-9a0434f06567.png" alt="ToDo List">
</p>

### 6、实时显示待完成任务数量

在谷歌的扩展栏，图标右下角实时显示待完成任务事项的数量。

<p align="center">
<img width="450" src="https://user-images.githubusercontent.com/38695411/184520421-7ba4efb3-8f89-4bf4-8aaf-9b9e3033bf3b.png" alt="ToDo List">
</p>

### 7、完成事项

完成事项后，直接对该事项进行打勾处理，会自动排序到最后。

<p align="center">
  <img width="450" src="https://user-images.githubusercontent.com/38695411/184520326-fb993a31-e182-4164-a92e-754181792160.png" alt="ToDo List">
</p>

### 8、删除任务事项

也可对任务事项进行删除操作，鼠标放在该任务文字上方，就会出现删除按钮。

<p align="center">
  <img width="450" src="https://user-images.githubusercontent.com/38695411/184520358-8200446a-5b51-446f-897a-192aebfefecc.png" alt="ToDo List">
</p>

### 9、一键清理

如果当天任务全部完成，即可进行一键清除(默认只清除完成事项)。

<p align="center">
  <img width="450" src="https://user-images.githubusercontent.com/38695411/184520374-8ab50cd8-0c0a-483d-9468-47e602449b57.png" alt="ToDo List">
</p>