Интеграция с Vue
DHTMLX Booking интегрируется с Vue 3 через однофайловый компонент, который монтирует виджет внутри контейнера с ref. Это руководство проведёт вас через создание проекта Vue, установку Booking и отрисовку виджета с данными и событиями. Полная эталонная реализация доступна в примере Vue на GitHub.
Это руководство предполагает знакомство с основными концепциями Vue 3. Для ознакомления см. документацию Vue 3.
Создание проекта
Создайте проект Vue перед добавлением интеграции с Booking.
Перед началом установите Node.js.
Следующая команда запускает официальный инструмент создания проекта Vue:
npm create vue@latest
Команда устанавливает и выполняет create-vue. Описание запросов и параметров см. в Vue.js Quick Start. При появлении запроса назовите проект my-vue-booking-app.
Установка зависимостей
Перейдите в каталог проекта.
Следующая команда открывает только что созданную папку приложения:
cd my-vue-booking-app
Установите зависимости и запустите сервер разработки с помощью вашего пакетного менеджера.
Следующие команды используют yarn:
yarn
yarn dev
Следующие команды используют npm:
npm install
npm run dev
Приложение запускается на localhost, например http://localhost:5173.
Добавление Booking в приложение
Остановите сервер разработки перед установкой пакета Booking, затем создайте компонент Vue, оборачивающий виджет.
Шаг 1. Установка пакета
Загрузите ознакомительный пакет Booking и следуйте инструкциям в README пакета. Ознакомительная версия активна в течение 30 дней.
Шаг 2. Создание компонента Booking
Создайте файл Booking.vue в каталоге src/components/ и выполните шаги ниже для подключения виджета.
Импорт исходных файлов
Импортируйте класс Booking и таблицу стилей, указав путь, соответствующий вашей версии дистрибутива:
- dhx-booking-package — PRO-версия, установленная из локальной папки
- @dhx/trial-booking — ознакомительная версия
Следующий фрагмент кода импортирует Booking из PRO-пакета:
<script>
import { Booking } from 'dhx-booking-package';
import 'dhx-booking-package/dist/booking.css';
</script>
Если ваш PRO-пакет поставляется с минифицированными ресурсами, импортируйте CSS-файл как booking.min.css.
Следующий фрагмент кода импортирует Booking из ознакомительного пакета:
<script>
import { Booking } from '@dhx/trial-booking';
import '@dhx/trial-booking/dist/booking.css';
</script>
В этом руководстве используется ознакомительная версия Booking.
Настройка контейнера и инициализация Booking
Объявите контейнер-хост в шаблоне и создайте экземпляр Booking в хуке mounted(). Вызовите destructor() в unmounted(), чтобы размонтировать виджет при удалении компонента Vue.
Следующий фрагмент кода объявляет компонент Booking с контейнером через ref и хуками жизненного цикла:
<script>
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";
export default {
mounted() {
// создание экземпляра Booking
this.booking = new Booking(this.$refs.container, {});
},
unmounted() {
this.booking.destructor(); // размонтирование Booking
}
};
</script>
<template>
<div ref="container" class="widget"></div>
</template>
Добавление стилей
Booking требует как таблицу стилей виджета (импортированную выше), так и контейнер с заданными размерами. Установите полную высоту для страницы и контейнера виджета в главном CSS-файле проекта.
Следующий фрагмент кода устанавливает полную высоту для страницы и контейнера Booking:
/* стили страницы — используется корневой контейнер #app */
html,
body,
#app {
height: 100%;
padding: 0;
margin: 0;
}
/* контейнер Booking */
.widget {
height: 100%;
}
Загрузка данных
Для загрузки данных карточек в Booking подготовьте набор данных, соответствующий свойству data. Полный формат данных и сценарии загрузки см. в руководстве Загрузка данных.
Создайте файл data.js в каталоге src/.
Следующий фрагмент кода определяет вспомогательную функцию getData(), возвращающую пример набора данных:
export function getData() {
function getDate(addDays, hoursValue = 0, minutesValue = 0) {
const date = new Date();
const secondsValue = 0; // округление до минут
const msValue = 0;
date.setDate(date.getDate() + addDays);
date.setHours(hoursValue, minutesValue, secondsValue, msValue);
return date.getTime();
}
return [
{
id: "ee828b5d-a034-420c-889b-978840015d6a",
title: "Natalie Tyson",
category: "Therapist",
subtitle: "2 years of experience",
details: "Cleveland Clinic\n9500 Euclid Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
price: "$35",
review: {
stars: 4,
count: 120
},
slots: [
{
from: 9,
to: 20,
days: [1, 2, 3, 4, 5]
},
{
from: 10,
to: 18,
days: [6, 0]
}
]
},
{
id: "9b037564-77be-429f-b719-eebbe499027a",
title: "Emma Johnson",
category: "Cardiologist",
subtitle: "2 years of experience",
details: "Stanford Health Care\n1468 Madison Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/03.jpg",
price: "$25",
review: {
stars: 5,
count: 10
},
slots: [
{
from: 14,
to: 17,
size: 30,
gap: 10
},
{
from: 12,
to: 19,
size: 50,
gap: 20,
days: [2],
dates: [getDate(0)]
},
{
from: "18:30",
to: 20,
size: 20,
gap: 20,
days: [3, 4, 5]
}
],
usedSlots: [getDate(0, 12), getDate(0, 18)]
},
// ...
];
}
Откройте App.vue, импортируйте набор данных, предоставьте его через опцию data() и передайте набор данных компоненту <Booking/> в качестве пропа.
Следующий фрагмент кода отображает компонент Booking с пропом data:
<script>
import Booking from "./components/Booking.vue";
import { getData } from "./data";
export default {
components: { Booking },
data() {
const dataset = getData();
return { dataset };
}
};
</script>
<template>
<Booking :data="dataset" />
</template>
Откройте Booking.vue и передайте проп data в конфигурацию Booking.
Следующий фрагмент кода подключает проп к конструктору Booking:
<script>
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";
export default {
props: ["data"],
mounted() {
this.booking = new Booking(this.$refs.container, {
data: this.data,
// другие свойства конфигурации
});
},
unmounted() {
this.booking.destructor();
}
};
</script>
<template>
<div ref="container" class="widget"></div>
</template>
Компонент Booking теперь отображается с загруженными данными. Для дальнейшей настройки виджета передайте дополнитель ные свойства конфигурации — полный список см. в обзоре свойств.
Обработка событий
Действие пользователя в виджете вызывает событие. Подпишитесь на событие с помощью booking.api.on(eventName, handler), чтобы реагировать на действие. Полный список событий см. в обзоре событий.
Откройте Booking.vue и расширьте mounted() подпиской на событие.
Следующий фрагмент кода выводит в лог идентификатор слота, когда пользователь выбирает слот:
<script>
// ...
export default {
// ...
mounted() {
this.booking = new Booking(this.$refs.container, {});
// вывод в лог идентификатора выбранного слота
this.booking.api.on("select-slot", (obj) => {
console.log(obj.id);
});
}
// ...
}
</script>
<!--...*/}
Запустите приложение, чтобы увидеть Booking с загруженными данными на странице.
Настройте код в соответствии с требованиями вашего проекта. Полная эталонная реализация доступна на GitHub.