什么是 todo-mg
todo-mg 是一个 npm 包，用于创建和管理待办事项列表。它提供了一个可重用的组件，可以轻松地将待办事项列表添加到你的网站或应用程序中。
安装
使用 npm 安装 todo-mg:
npm install todo-mg
使用
要在你的项目中使用 todo-mg，需要执行以下步骤：
引入
在 script 标签中添加以下代码：
<script src="node_modules/todo-mg/dist/todo-mg.js"></script>
HTML
在 HTML 中，添加一个空的 div，它将被用来渲染待办事项列表：
<div id="todo-list"></div>
初始化
在 JavaScript 中，你需要调用 TodoMg.init() 方法初始化 todo-mg：
-- -------------------- ---- ------- ----- -------- - ------------------------------------- ----- ----- - - - --- -- ----- ---- ------ ----- ----- -- - --- -- ----- ----- --- ----- ----- ---- -- - --- -- ----- --- --------- ----- ----- - -- --------------------- -------
TodoMg.init() 方法需要传递两个参数：一个包含待办事项的数组，和一个待办事项列表的 DOM 元素。
自定义样式
你可以自定义待办事项列表的外观，例如更改字体、背景色和边框。要自定义样式，只需添加一个 CSS 文件并将其链接到你的 HTML 文件中，例如：
<link rel="stylesheet" href="path/to/custom.css">
API
TodoMg.init(listElement, items)
初始化 todo-mg 组件，需要传递两个参数:
listElement: 待办事项列表的 DOM 元素。items: 包含待办事项的数组。
TodoMg.add(text)
添加一个待办事项。需要传递一个字符串作为参数，表示待办事项的文本内容。
TodoMg.add('Clean the kitchen');TodoMg.remove(id)
根据 ID 删除一个待办事项。需要传递一个 ID 作为参数。
TodoMg.remove(1);
TodoMg.check(id)
标记一个待办事项为已完成。需要传递一个 ID 作为参数。
TodoMg.check(2);
TodoMg.uncheck(id)
标记一个待办事项为未完成。需要传递一个 ID 作为参数。
TodoMg.uncheck(2);
示例
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ------------
----- ---------------- --------------------------
-------
------
---- ---------------------
------- ----------------------------------------------------
--------
----- -------- - -------------------------------------
----- ----- - -
- --- -- ----- ---- ------ ----- ----- --
- --- -- ----- ----- --- ----- ----- ---- --
- --- -- ----- --- --------- ----- ----- -
--
--------------------- -------
----------------- --- ----------
-----------------
----------------
---------
-------
-------总结
todo-mg 是一个非常有用的工具，可以帮助你轻松地管理待办事项列表。可以通过自定义样式轻松地将其与你的网站或应用程序进行整合。本教程向你详细介绍了如何使用 todo-mg 包，并且提供了一个实际示例，希望对你有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005701781e8991b448e7cf8