与 Vue 集成
DHTMLX To Do List 与 Vue 3 兼容。以下示例演示如何将两者结合使用。完整项目请参见 GitHub 上的示例。
创建项目
使用脚手架工具创建新的 Vue 项目并安装依赖项。
在创建新项目之前，请先安装 Node.js。
要创建 Vue 项目，运行以下命令：
npm create vue@latest
该命令会安装并执行 create-vue，即 Vue 官方项目脚手架工具。详情请参阅 Vue.js 快速上手指南。
将项目命名为 my-vue-todo-app。
安装依赖项
进入应用目录：
cd my-vue-todo-app
使用包管理器安装依赖项并启动开发服务器。
使用 yarn 运行以下命令：
yarn
yarn start
使用 npm 运行以下命令：
npm install
npm run dev
应用将在本地地址上运行（例如 http://localhost:3000）。
创建 To Do List
停止应用并安装 To Do List 包。
步骤一：安装包
下载 To Do List 试用包 并按照 README 文件中的步骤操作。试用版仅可使用 30 天。
步骤二：创建组件
创建一个 Vue 组件，将带有 Toolbar 的 To Do List 添加到应用中。在 src/components/ 目录下，新建一个名为 ToDo.vue 的文件。
导入源文件
打开 ToDo.vue，导入 To Do List 的源文件。可选择以下两种导入路径之一：
- 从本地文件夹安装的 PRO 版本 — 从
dhx-todolist-package导入 - 试用版 — 从
@dhx/trial-todolist导入
以下示例从 PRO 包导入：
<script>
import { ToDo, Toolbar } from 'dhx-todolist-package';
import 'dhx-todolist-package/dist/todo.css';
</script>
根据包的不同，源文件可能已被压缩。此时请将 CSS 文件导入为 todo.min.css。
以下代码片段从试用包导入：
<script>
import { ToDo, Toolbar } from '@dhx/trial-todolist';
import '@dhx/trial-todolist/dist/todo.css';
</script>
本教程使用试用版本。
设置容器并添加带 Toolbar 的 To Do List
要在页面上显示带 Toolbar 的 To Do List，需为两个组件创建容器并使用构造函数进行初始化。以下示例在 mounted() 钩子中初始化组件：
<script>
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
export default {
mounted() {
// 初始化 To Do List 组件
this.todo = new ToDo(this.$refs.todo_container, {});
// 初始化 Toolbar 组件
this.toolbar = new Toolbar(this.$refs.toolbar_container, {
api: this.todo.api, // 提供 To Do List 内部 API
// 其他配置属性
});
},
unmounted() {
this.todo.destructor(); // 销毁 To Do List
this.toolbar.destructor(); // 销毁 Toolbar
}
};
</script>
<template>
<div class="component_container">
<div ref="toolbar_container"></div>
<div ref="todo_container" style="height: calc(100% - 56px);"></div>
</div>
</template>
加载数据
在 src/ 目录下创建 data.js 文件并向其中添加数据。以下示例导出一个 getData() 函数，该函数返回任务、用户和项目数据：
export function getData() {
const tasks = [
{
id: "temp://1652991560212",
project: "introduction",
text: "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List.",
priority: 1
},
{
id: "1652374122964",
project: "introduction",
text: "You can assign task performers and due dates using the menu.",
assigned: ["user_4", "user_1", "user_2", "user_3"],
due_date: "2033-03-08T21:00:00.000Z",
priority: 2
},
// ...
];
const users = [
{
id: "user_1",
label: "Don Smith",
avatar:
"https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg"
},
// ...
];
const projects = [
{
id: "introduction",
label: "Introduction to DHTMLX To Do List"
},
{
id: "widgets",
label: "Our widgets"
}
];
return { tasks, users, projects };
}
打开 App.vue，导入数据并通过内部 data() 方法进行初始化。将数据作为 props 传入 <ToDo/> 组件：
<script>
import ToDo from "./components/ToDo.vue";
import { getData } from "./data";
export default {
components: { ToDo },
data() {
const { users, projects, tasks } = getData();
return {
users,
projects,
tasks
};
}
};
</script>
<template>
<ToDo :users="users" :tasks="tasks" :projects="projects" />
</template>
打开 ToDo.vue，将传入的 props 应用到 To Do List 配置对象。以下代码片段通过配置传入用户、任务和项目数据：
<script>
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
export default {
props: ["tasks", "users", "projects"],
mounted() {
this.todo = new ToDo(this.$refs.todo_container, {
users: this.users,
tasks: this.tasks,
projects: this.projects,
// 其他配置属性
});
this.toolbar = new Toolbar(this.$refs.toolbar_container, {
api: this.todo.api,
// 其他配置属性
});
},
unmounted() {
this.todo.destructor();
this.toolbar.destructor();
}
};
</script>
<template>
<div class="component_container">
<div ref="toolbar_container"></div>
<div ref="todo_container" style="height: calc(100% - 56px);"></div>
</div>
</template>
您也可以在 mounted() 中使用 parse() 方法将数据加载到 To Do List。以下示例在初始化后使用 parse() 加载数据：
<script>
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
export default {
props: ["tasks", "users", "projects"],
mounted() {
this.todo = new ToDo(this.$refs.todo_container, {});
this.toolbar = new Toolbar(this.$refs.toolbar_container, {
api: this.todo.api,
// 其他配置属性
});
this.todo.parse({
users: this.users,
tasks: this.tasks,
projects: this.projects
});
},
unmounted() {
this.todo.destructor();
this.toolbar.destructor();
}
};
</script>
<template>
<div class="component_container">
<div ref="toolbar_container"></div>
<div ref="todo_container" style="height: calc(100% - 56px);"></div>
</div>
</template>
每次调用 parse(data) 都会替换当前数据集。
该组件现在将渲染一个已填充数据的 To Do List。其他可用属性请参见配置概览。
处理事件
订阅事件以响应用户操作。请参见完整事件列表。
打开 ToDo.vue 并完善 mounted() 方法。以下代码片段为 add-task 事件添加处理程序：
<script>
// ...
export default {
// ...
mounted() {
this.todo = new ToDo(this.$refs.todo_container, {});
this.todo.api.on("add-task", ({ id }) => {
console.log("A new task is added", id);
});
},
unmounted() {
this.todo.destructor();
}
}
</script>
// ...
步骤三：将 To Do List 添加到应用中
要将组件添加到应用中，请打开 App.vue 并将默认代码替换为以下代码片段：
<script>
import ToDo from "./components/ToDo.vue";
import { getData } from "./data";
export default {
components: { ToDo },
data() {
const { users, projects, tasks } = getData();
return {
users,
projects,
tasks
};
}
};
</script>
<template>
<ToDo :users="users" :tasks="tasks" :projects="projects" />
</template>
启动应用，To Do List 将渲染并显示示例数据：
在 GitHub 上查看完整项目。