跳至主要内容

与 Vue 集成

提示

在阅读本文档之前，请先熟悉 Vue 的基本概念和模式。如需温习相关知识，请参阅 Vue 3 文档。

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 包导入：

ToDo.vue
<script>
import { ToDo, Toolbar } from 'dhx-todolist-package';
import 'dhx-todolist-package/dist/todo.css';
</script>

根据包的不同，源文件可能已被压缩。此时请将 CSS 文件导入为 todo.min.css。

以下代码片段从试用包导入：

ToDo.vue
<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() 钩子中初始化组件：

ToDo.vue
<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() 函数，该函数返回任务、用户和项目数据：

data.js
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/> 组件：

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>

打开 ToDo.vue，将传入的 props 应用到 To Do List 配置对象。以下代码片段通过配置传入用户、任务和项目数据：

ToDo.vue
<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() 加载数据：

ToDo.vue
<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 事件添加处理程序：

ToDo.vue
<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 并将默认代码替换为以下代码片段：

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 将渲染并显示示例数据：

在 Vue 应用程序中渲染的带有示例数据的 DHTMLX To Do List

在 GitHub 上查看完整项目。

Need more help?Contact Support