Как выполнить действия сценария перед изменением панели Tailwind PrimeVue v3 Stepper
Я пытаюсь использовать компонент Tailwind PrimeVue v3 Stepper, и мне нужно выполнить некоторые действия перед перемещением между каждой StepperPanel.
Например, я хочу выполнить простой console.info("before panel change") изнутри области <script setup lang='ts'> перед изменением каждой панели.
Как это можно сделать?
Из документации я вижу, что компонент PrimeVue Stepper имеет update:activeStep и step-change, но они срабатывают после смены панелей. И мне нужно выполнить действия скрипта до того, как панель поменяется.
В документации также показано использование prevCallback и nextCallback для перемещения между панелями, поэтому я предполагаю, что мне нужно как-то к ним подключиться. Но они предоставляются внутри шаблона, и я понятия не имею, как получить к ним доступ внутри области тега скрипта.
Вот действующий URL-адрес, который можно попробовать: https://stackblitz.com/edit/nuxt-starter-k97nc8?file=app.vue
<template>
<div class = "card flex justify-center">
<Stepper>
<StepperPanel header = "Header I">
<template #content = "{ nextCallback }">
<div class = "flex flex-col h-[12rem]">
<div
class = "border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-md bg-surface-0 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium"
>
Content I
</div>
</div>
<div class = "flex pt-4 justify-end">
<Button
label = "Next"
icon = "pi pi-arrow-right"
iconPos = "right"
@click = "nextCallback"
/>
</div>
</template>
</StepperPanel>
<StepperPanel header = "Header II">
<template #content = "{ prevCallback, nextCallback }">
<div class = "flex flex-col h-[12rem]">
<div
class = "border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-md bg-surface-0 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium"
>
Content II
</div>
</div>
<div class = "flex pt-4 justify-between">
<Button
label = "Back"
severity = "secondary"
icon = "pi pi-arrow-left"
@click = "prevCallback"
/>
<Button
label = "Next"
icon = "pi pi-arrow-right"
iconPos = "right"
@click = "nextCallback"
/>
</div>
</template>
</StepperPanel>
<StepperPanel header = "Header III">
<template #content = "{ prevCallback }">
<div class = "flex flex-col h-[12rem]">
<div
class = "border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-md bg-surface-0 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium"
>
Content III
</div>
</div>
<div class = "flex pt-4 justify-start">
<Button
label = "Back"
severity = "secondary"
icon = "pi pi-arrow-left"
@click = "prevCallback"
/>
</div>
</template>
</StepperPanel>
</Stepper>
</div>
</template>
<script setup lang = "ts">
// Do something in here BEFORE moving between stepper panels
// For example, do a console.info("before panel change")
// I assume I need to use nextCallback and prevCallback from the template
// But I don't know how to access those callbacks here inside script
</script>
<style scoped>
.p-stepper {
flex-basis: 50rem;
}
</style>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это достаточно распространенная ситуация, и возможным следствием такого требования может быть то, что действие является асинхронным; это нельзя было обработать с помощью событий Stepper, поскольку события Vue не имеют механизма ожидания асинхронного побочного эффекта в обработчиках событий.
Обычно не ожидается, что сторонние библиотеки будут удовлетворять этот диапазон требований, они должны обеспечивать достаточную гибкость посредством обратных вызовов; это то, что Stepper уже сделал здесь. Поскольку действие шага запускается в том же компоненте «до» того, как действие должно быть выполнено, разработчик имеет полный контроль над их выполнением:
<template #content = "{ nextCallback }">
...
<Button
@click = "changeStep($event, nextCallback)"
/>
</div>
...
<script setup lang = "ts">
function changeStep(event: MouseEvent, callback: (event: Event) => void) {
// Do some actions
callback(event);
}
</script>
Обратите внимание, что исходное событие мыши передается как есть, если от него зависит реализация.
Пожалуйста. Да, тем более, что это вопрос ТС.
Спасибо, это работает. Для других, использующих TypeScript, вы можете ввести аргументы как таковые
event: MouseEvent, callback: (event: Event) => void. Возможно, вы также захотите обновить свой ответ с помощью них.