Appearance
Appearance
这是基础按钮组件,支持不同类型。以下示例展示如何使用带 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>
使用 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><template>
<div class="demo-alert-slot">
<yf-alert type="info">
<template #default>
<strong>注意:</strong> 这条消息是通过 slot 插入的。
</template>
</yf-alert>
</div>
</template>