ChAlert

Компонент для отображения алертов

Usage

<template>
  <ChAlert
    ref="alertRef"
    duration="5000"
    persistent
  >
    <template #default="{ content }">
      <p>{{ content }}</p>
    </template>
    <template #icon>
      <ChAlertIcon>Icon</ChAlertIcon>
    </template>
    <template #footer>
      <ChAlertButton>Button</ChAlertButton>
    </template>
  </ChAlert>
</template>

<script>
  import { ref } from 'vue'
  import { ChAlert, ChAlertIcon, ChAlertButton } from 'choco-ui'

  const alertRef = ref()

  alertRef.show('Alert content') // Shows alert with content == 'Alert content'
  alertRef.hide() // Hides alert
</script>
Copy

Props

Methods

ChAlert предоставляет public методы show, hide и переменную isVisible для отображения/скрытия алерта.

Для того, чтобы использовать эти public api нужно добавить ref на ChAlert

<template>
  <ChAlert ref="alertRef">
    <template #default="{ content }">
      <p>{{ content.main }}</p>
    </template>
    <template #footer="{ content }">
      <p>{{ content.footer }}</p>
    </template>
  </ChAlert>
</template>

<script>
  import { ref } from 'vue'
  import { ChAlert } from 'choco-ui'

  const alertRef = ref()

  alertRef.show({ main: 'Content may be of any type', footer: 'This is footer content' }) // Shows alert
  alertRef.hide() // Hides alert
</script>
Copy

Slots