VitePressAlert 提示
用于页面中展示重要的提示信息。
基础用法
Alert 组件不属于浮层元素，不会自动消失或关闭。
Alert 组件提供四种类型，由 type 属性指定，默认值为 info。
success alert
info alert
warning alert
error alert
<script lang="ts" setup></script>
<template>
<div class="block">
<ZgAlert class="alert" title="success alert" type="success" />
<ZgAlert class="alert" title="info alert" type="info" />
<ZgAlert class="alert" title="warning alert" type="warning" />
<ZgAlert class="alert" title="error alert" type="error" />
</div>
</template>
<style>
.block {
margin-bottom: 10px;
width: 60%;
.alert {
margin-bottom: 10px;
}
}
</style><script lang="ts" setup></script>
<template>
<div class="block">
<ZgAlert class="alert" title="success alert" type="success" />
<ZgAlert class="alert" title="info alert" type="info" />
<ZgAlert class="alert" title="warning alert" type="warning" />
<ZgAlert class="alert" title="error alert" type="error" />
</div>
</template>
<style>
.block {
margin-bottom: 10px;
width: 60%;
.alert {
margin-bottom: 10px;
}
}
</style>显示类型图标
使用showIcon属性
success alert
info alert
warning alert
error alert
<script lang="ts" setup></script>
<template>
<div class="block">
<ZgAlert class="alert" title="success alert" type="success" showIcon />
<ZgAlert class="alert" title="info alert" type="info" showIcon />
<ZgAlert class="alert" title="warning alert" type="warning" showIcon />
<ZgAlert class="alert" title="error alert" type="error" showIcon />
</div>
</template>
<style>
.block {
margin-bottom: 10px;
width: 60%;
.alert {
margin-bottom: 10px;
}
}
</style><script lang="ts" setup></script>
<template>
<div class="block">
<ZgAlert class="alert" title="success alert" type="success" showIcon />
<ZgAlert class="alert" title="info alert" type="info" showIcon />
<ZgAlert class="alert" title="warning alert" type="warning" showIcon />
<ZgAlert class="alert" title="error alert" type="error" showIcon />
</div>
</template>
<style>
.block {
margin-bottom: 10px;
width: 60%;
.alert {
margin-bottom: 10px;
}
}
</style>描述文本
使用description属性
success alert
描述信息
info alert
描述信息
warning alert
描述信息
error alert
描述信息
<script lang="ts" setup></script>
<template>
<div class="block">
<ZgAlert class="alert" title="success alert" type="success" showIcon description="描述信息" />
<ZgAlert class="alert" title="info alert" type="info" showIcon description="描述信息" />
<ZgAlert class="alert" title="warning alert" type="warning" showIcon description="描述信息" />
<ZgAlert class="alert" title="error alert" type="error" showIcon description="描述信息" />
</div>
</template>
<style>
.block {
margin-bottom: 10px;
width: 60%;
.alert {
margin-bottom: 10px;
}
}
</style><script lang="ts" setup></script>
<template>
<div class="block">
<ZgAlert class="alert" title="success alert" type="success" showIcon description="描述信息" />
<ZgAlert class="alert" title="info alert" type="info" showIcon description="描述信息" />
<ZgAlert class="alert" title="warning alert" type="warning" showIcon description="描述信息" />
<ZgAlert class="alert" title="error alert" type="error" showIcon description="描述信息" />
</div>
</template>
<style>
.block {
margin-bottom: 10px;
width: 60%;
.alert {
margin-bottom: 10px;
}
}
</style>Alert Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| title | Alert 标题。 | string | — |
| type | Alert 类型。 | enum - 'success'| 'warning'| 'error'| 'info' | info |
| description | 描述性文本 | string | — |
| closable | 是否可以关闭 | boolean | true |
| showIcon | 是否显示类型图标 | boolean | false |
| center | 文字是否居中 | boolean | false |
Alert Slots
| 插槽名 | Description |
|---|---|
| default | 标题的内容 |
| description | Alert 内容描述 |