Alert 提示组件

这是基础按钮组件，支持不同类型。以下示例展示如何使用带 yf- 前缀的 alert 组件：

基础用法

用于页面中展示重要的提示信息。 Alert 组件不属于浮层元素，不会自动消失或关闭。

操作成功提示

普通信息提示

警告信息提示

错误信息提示

<template>
    <!-- 成功提示 -->
    <yf-alert type="success" message="操作成功提示" />

    <!-- 信息提示 -->
    <yf-alert type="info" message="普通信息提示" />

    <!-- 警告提示 -->
    <yf-alert type="warning" message="警告信息提示" />

    <!-- 错误提示 -->
    <yf-alert type="error" message="错误信息提示" />
</template>

plain用法

使用 type、plain、close定义样式。

成功提示

信息提示

警告提示

错误提示

<template>
    <yf-alert type="success" plain close>成功提示</yf-alert>
    <yf-alert type="info" plain close>信息提示</yf-alert>
    <yf-alert type="warning" plain>警告提示</yf-alert>
    <yf-alert type="error" plain>错误提示</yf-alert>
</template>

slot 使用的区别教学

注意： 这条消息是通过 slot 插入的。

<template>
  <div class="demo-alert-slot">
    <yf-alert type="info">
      <template #default>
        <strong>注意：</strong> 这条消息是通过 slot 插入的。
      </template>
    </yf-alert>
  </div>
</template>