Alert 提示 #

<template>
  <vi-flex direction="column" gap="18px">
    <vi-alert>主要提示</vi-alert>
    <vi-alert type="success">成功提示</vi-alert>
    <vi-alert type="info">信息提示</vi-alert>
    <vi-alert type="warning">警告提示</vi-alert>
    <vi-alert type="danger">危险提示</vi-alert>
  </vi-flex>
</template>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-alert closable>主要提示</vi-alert>
    <vi-alert type="success" closable>成功提示</vi-alert>
    <vi-alert type="info" closable>信息提示</vi-alert>
    <vi-alert type="warning" closable>警告提示</vi-alert>
    <vi-alert type="danger" closable>危险提示</vi-alert>
  </vi-flex>
</template>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-alert closable pre-icon>主要提示</vi-alert>
    <vi-alert type="success" closable pre-icon>成功提示</vi-alert>
    <vi-alert type="info" closable pre-icon>信息提示</vi-alert>
    <vi-alert type="warning" closable pre-icon>警告提示</vi-alert>
    <vi-alert type="danger" closable pre-icon>危险提示</vi-alert>
  </vi-flex>
</template>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-alert closable pre-icon dark>主要提示</vi-alert>
    <vi-alert type="success" closable pre-icon dark>成功提示</vi-alert>
    <vi-alert type="info" closable pre-icon dark>信息提示</vi-alert>
    <vi-alert type="warning" closable pre-icon dark>警告提示</vi-alert>
    <vi-alert type="danger" closable pre-icon dark>危险提示</vi-alert>
  </vi-flex>
</template>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-alert closable pre-icon center="text">文字居中</vi-alert>
    <vi-alert type="success" closable pre-icon center="text">文字居中</vi-alert>
    <vi-alert type="info" closable pre-icon center="all">全部居中</vi-alert>
    <vi-alert type="warning" closable pre-icon center="all">全部居中</vi-alert>
    <vi-alert type="danger" closable pre-icon center="all">全部居中</vi-alert>
  </vi-flex>
</template>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-alert closable pre-icon="HomeFill">primary 图标</vi-alert>
    <vi-alert type="success" closable pre-icon="Check">success 图标</vi-alert>
    <vi-alert type="info" closable pre-icon="TagFill">info 图标</vi-alert>
    <vi-alert type="warning" closable pre-icon="ScienceFill">warning 图标</vi-alert>
    <vi-alert type="danger" closable pre-icon="HeartBrokenFill">danger 图标</vi-alert>
  </vi-flex>
</template>

<script lang="ts" setup>
const close = () => {
  console.log('closing')
}
</script>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-alert closable pre-icon>
      文字关闭
      <template #close>Got It!</template>
    </vi-alert>
    <vi-alert type="success" closable pre-icon>
      其他图标关闭
      <template #close> <vi-icon name="VisibilityOff" /> </template>
    </vi-alert>
    <vi-alert type="danger" closable pre-icon @close="close">触发 close 事件</vi-alert>
  </vi-flex>
</template>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-alert closable title="这是标题"> 这是内容 </vi-alert>
    <vi-alert type="success" closable pre-icon title="携带图标"> 图标会被放大 </vi-alert>
    <vi-alert type="info" closable pre-icon title="仅包含标题" />
    <vi-alert type="warning" closable pre-icon title="自闭合" content="使用 content 定义内容" />
  </vi-flex>
</template>