163 lines
4.2 KiB
Markdown
163 lines
4.2 KiB
Markdown
Туры. Они должны описывать:
|
||
|
||
- какие шаги есть;
|
||
- какой элемент подсвечивать;
|
||
- какие события ждать;
|
||
- какие действия выполнять до/после шага.
|
||
|
||
Например:
|
||
```
|
||
resources/js/Tours
|
||
├── index.js
|
||
├── welcomeDuty.js
|
||
└── report.js
|
||
```
|
||
|
||
```Tours/index.js```
|
||
```js
|
||
import welcomeDuty from "./welcomeDuty"
|
||
import report from "./report"
|
||
|
||
|
||
export default {
|
||
welcomeDuty,
|
||
report
|
||
}
|
||
```
|
||
|
||
Пример простого тура
|
||
|
||
```Tours/welcomeDuty.js```
|
||
|
||
```js
|
||
export default {
|
||
id: "welcomeDuty",
|
||
name: "Первое знакомство с дежурством",
|
||
steps: [
|
||
{
|
||
id: "department",
|
||
target: "#modal-select-user-department",
|
||
title: "Выберите отделение",
|
||
description: "Начните вводить название отделения и выберите его из списка.",
|
||
placement: "right",
|
||
highlight: true,
|
||
scroll: true,
|
||
allowInteraction: true,
|
||
nextEvent: "department:selected"
|
||
},
|
||
{
|
||
id: "doctor",
|
||
target: "#modal-select-user-doctor",
|
||
title: "Выберите врача",
|
||
description: "Теперь выберите ответственного врача.",
|
||
placement: "bottom",
|
||
highlight: true,
|
||
allowInteraction: true,
|
||
nextEvent: "doctor:selected"
|
||
},
|
||
{
|
||
id: "finish",
|
||
target: "#duty-create-button",
|
||
title: "Создание дежурства",
|
||
description: "После заполнения всех полей нажмите кнопку создания.",
|
||
placement: "top",
|
||
highlight: true,
|
||
allowInteraction: true
|
||
}
|
||
]
|
||
}
|
||
```
|
||
Пример с переходом между страницами
|
||
|
||
Например, первый шаг в модалке, второй на странице отчёта:
|
||
|
||
```Tours/report.js```
|
||
|
||
```js
|
||
export default {
|
||
id: "report",
|
||
name: "Создание отчёта",
|
||
steps: [
|
||
{
|
||
id: "open-report",
|
||
route: "reports.create",
|
||
target: "#report-date",
|
||
title: "Дата отчёта",
|
||
description: "Выберите период формирования отчёта.",
|
||
placement: "bottom",
|
||
scroll: true,
|
||
highlight: true
|
||
},
|
||
{
|
||
id: "department-filter",
|
||
target: "#department-filter",
|
||
title: "Фильтр отделения",
|
||
description: "Можно ограничить отчёт конкретным отделением.",
|
||
placement: "right",
|
||
nextEvent: "filter:selected"
|
||
},
|
||
{
|
||
id: "export",
|
||
target: "#export-report",
|
||
title: "Экспорт",
|
||
description: "Нажмите кнопку для выгрузки отчёта.",
|
||
placement: "left"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
```Шаг с логикой```
|
||
|
||
Например, перед открытием модалки:
|
||
|
||
```js
|
||
{
|
||
id: "open-user-modal",
|
||
title: "Добавление пользователя",
|
||
description: "Сначала откройте форму.",
|
||
beforeEnter() {
|
||
userModal.value = true
|
||
},
|
||
target: "#user-modal"
|
||
}
|
||
```
|
||
|
||
```Шаг с проверкой перед переходом```
|
||
|
||
Например форма:
|
||
|
||
```js
|
||
{
|
||
id: "save-user",
|
||
target: "#save-user-button",
|
||
title: "Сохранение",
|
||
description: "Заполните обязательные поля.",
|
||
beforeNext() {
|
||
return form.validate()
|
||
}
|
||
}
|
||
```
|
||
|
||
```Шаг с ручным управлением```
|
||
|
||
Например поле нельзя пропустить:
|
||
|
||
```js
|
||
{
|
||
id: "confirm",
|
||
target: "#confirm-checkbox",
|
||
title: "Подтвердите",
|
||
description: "Необходимо поставить галочку.",
|
||
manual: true,
|
||
nextEvent: "confirmed"
|
||
}
|
||
```
|
||
|
||
И компонент:
|
||
|
||
```js
|
||
onboarding.emit(
|
||
"confirmed"
|
||
)
|
||
```
|
||
переведёт дальше. |