Alert 警告提示
警告提示,展现需要关注的信息。
何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
代码演示
最简单的用法,适用于简短的警告提示。
<template>
<a-alert message="Success Text" type="success" />
</template>
显示关闭按钮,点击可关闭警告提示。
<template>
<a-alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
type="warning"
closable
@close="onClose"
/>
<a-alert
message="Error Text"
description="Error Description Error Description Error Description Error Description Error Description Error Description"
type="error"
closable
@close="onClose"
/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const onClose = (e: MouseEvent) => {
console.log(e, 'I was closed.');
};
return {
onClose,
};
},
});
</script>
可口的图标让信息类型更加醒目。
<template>
<a-alert message="Success Tips" type="success" show-icon />
<a-alert message="Informational Notes" type="info" show-icon />
<a-alert message="Warning" type="warning" show-icon />
<a-alert message="Error" type="error" show-icon />
<a-alert
message="Success Tips"
description="Detailed description and advices about successful copywriting."
type="success"
show-icon
/>
<a-alert
message="Informational Notes"
description="Additional description and informations about copywriting."
type="info"
show-icon
/>
<a-alert
message="Warning"
description="This is a warning notice about copywriting."
type="warning"
show-icon
/>
<a-alert
message="Error"
description="This is an error message about copywriting."
type="error"
show-icon
/>
</template>
最简单的用法,适用于简短的警告提示。
<template>
<a-alert message="Warning text" banner />
<br />
<a-alert
message="Very long warning text warning text text text text text text text"
banner
closable
/>
<br />
<a-alert :show-icon="false" message="Warning text without icon" banner />
<br />
<a-alert type="error" message="Error text" banner />
</template>
平滑、自然的卸载提示。
<template>
<a-alert
v-if="visible"
message="Alert Message Text"
type="success"
closable
:after-close="handleClose"
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const visible = ref<boolean>(true);
const handleClose = () => {
visible.value = false;
};
return {
visible,
handleClose,
};
},
});
</script>
共有四种样式 success
、info
、warning
、error
。
<template>
<a-alert message="Success Text" type="success" />
<a-alert message="Info Text" type="info" />
<a-alert message="Warning Text" type="warning" />
<a-alert message="Error Text" type="error" />
</template>
含有辅助性文字介绍的警告提示。
<template>
<a-alert message="Success Text" type="success">
<template #description>
<p>
Success Description
<span style="color: red">Success</span>
Description Success Description
</p>
</template>
</a-alert>
<a-alert
message="Info Text"
description="Info Description Info Description Info Description Info Description"
type="info"
/>
<a-alert
message="Warning Text"
description="Warning Description Warning Description Warning Description Warning Description"
type="warning"
/>
<a-alert
message="Error Text"
description="Error Description Error Description Error Description Error Description"
type="error"
/>
</template>
自定义图标让信息类型更加醒目。
<template>
<a-alert message="Info Text" type="info" close-text="Close Now" />
</template>
可以自定义关闭,自定义的文字会替换原先的关闭 Icon
。
<template>
<a-alert message="showIcon = false" type="success">
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Success Tips" type="success" showIcon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Informational Notes" type="info" showIcon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Warning" type="warning" showIcon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Error" type="error" showIcon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Success Tips"
description="Detailed description and advices about successful copywriting."
type="success"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Informational Notes"
description="Additional description and informations about copywriting."
type="info"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Warning"
description="This is a warning notice about copywriting."
type="warning"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Error"
description="This is an error message about copywriting."
type="error"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
</template>
<script lang="ts">
import { SmileOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
SmileOutlined,
},
});
</script>
API
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
banner | 是否用作顶部公告 | boolean | false | |
closable | 默认不显示关闭按钮 | boolean | 无 | |
closeText | 自定义关闭按钮 | string|slot | 无 | |
description | 警告提示的辅助性文字介绍 | string|slot | 无 | |
icon | 自定义图标,showIcon 为 true 时有效 | vnode|slot | - | |
message | 警告提示内容 | string|slot | 无 | |
showIcon | 是否显示辅助图标 | boolean | false,banner 模式下默认值为 true | |
type | 指定警告提示的样式,有四种选择 success 、info 、warning 、error | string | info ,banner 模式下默认值为 warning |
事件
事件名称 | 说明 | 回调参数 | 版本 |
---|---|---|---|
close | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |