Как в Nuxt 3 реализовать подтверждение действия пользователя?

Question

[vladimirir]

На сайте есть режим редактирования для админов, в котором они могут удалять статьи и комментарии, но перед удалением любого элемента всплывает форма подтверждения этого действия. Если нажать "Нет", она просто закроется. Как передать в компонент формы данные о том, какое действие надо сделать при нажатии на "Да"? Не хочется для каждой сущности (статья, комментарий, будут ещё) реализовывать отдельную форму.

Comments

[Aetae]

Миллионом способов, в зависимости от того как написан твой сайт?

[vladimirir]

Aetae, я имел в виду, может, есть какая-то "best practice") Потому что раньше мне такую задачу реализовывать не приходилось.

[Aetae]

vladimirir, для меня это задача ничем не отличается от абсолютно любой иной. В ней нет ровным счётом ничего особенного, что бы её выделяло, и для чего были бы какие-то best practices, кроме общих для всего vue.

Показывай код и пиши что тебя смущает\что вызывает сложности.

Answer 1

[aloky]

Я к примеру сделал так

<UiConfirmButton
  color="success"
  :loading="loading"
  block
  message="После публикации билеты станут доступны для продажи и изменить шаблон будет нельзя."
  label="Опубликовать"
  @confirm="fetch"
/>

<script setup lang="ts">
import type { ButtonProps } from '@nuxt/ui';

const emit = defineEmits<{
  (e: 'confirm'): void
}>();

defineOptions({
  inheritAttrs: false,
});

interface Props extends ButtonProps {
  message?: string
  confirmLabel?: string
  confirmColor?: ButtonProps['color']
}

const props = defineProps<Props>();

const { message, confirmLabel, confirmColor, ...buttonProps } = props;

const open = ref(false);

const confirm = () => {
  emit('confirm');
  open.value = false;
};
</script>

<template>
  <UModal
    v-model:open="open"
    :title="$t('confirm.label')"
  >
    <UButton v-bind="buttonProps">
      <template v-if="$slots">
        <slot />
      </template>
    </UButton>
    <template #body>
      <UAlert
        variant="soft"
        icon="i-tabler-alert-triangle"
        :title="message || $t('confirm.message')"
        color="error"
      />
    </template>
    <template #footer>
      <div class="flex gap-x-2 w-full justify-end pb-safe">
        <UButton
          :label="$t('button.cancel')"
          color="neutral"
          variant="outline"
          @click="open = false"
        />
        <UButton
          :label="confirmLabel || $t('button.confirm')"
          :color="confirmColor || 'success'"
          @click="confirm"
        />
      </div>
    </template>
  </UModal>
</template>

<style scoped lang="scss">

</style>