Интеграция с 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
Приложение запускается по адресу localhost (например, http://localhost:3000).
Создание To Do List
Остановите приложение и установите пакет To Do List.
Шаг 1. Установка пакета
Загрузите пробный пакет To Do List и следуйте инструкциям в файле README. Пробная версия доступна только 30 дней.
Шаг 2. Создание компонента
Создайте Vue-компонент для добавления To Do List с Toolbar в приложение. В директории 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>
В этом руководстве используется пробная версия.
Настройка контейнеров и добавление To Do List с Toolbar
Чтобы отобразить To Do List с Toolbar на странице, создайте контейнеры для обоих компонентов и инициализируйте их с помощью конструкторов. Пример ниже инициализирует компоненты внутри хука 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, // передача внутреннего API To Do List
// другие свойства конфигурации
});
},
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>
Загрузка данных
Создайте файл data.js в директории src/ и добавьте в него данные. Следующий пример экспортирует функцию 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(). Передайте данные в компонент <ToDo/> как props:
<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>
Вы также можете использовать метод parse() внутри mounted() для загрузки данных в 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>
// ...
Шаг 3. Добавление 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.