警告提示 AsamAlert

在页面内展示状态、操作建议和可关闭的提示。适用于持续可见的信息。

使用场景

在页面内展示状态、操作建议和可关闭的提示。适用于持续可见的信息。

状态与关闭

切换四种状态；关闭后使用重置按钮重新显示。

状态与关闭

vue

<template>
	<div class="demo">
		<div class="actions">
			<label>
				<span>状态</span>
				<AsamSelect v-model="kind">
					<AsamOption :label="'success'" :value="'success'">success</AsamOption>
					<AsamOption :label="'info'" :value="'info'">info</AsamOption>
					<AsamOption :label="'warning'" :value="'warning'">warning</AsamOption>
					<AsamOption :label="'error'" :value="'error'">error</AsamOption>
				</AsamSelect>
			</label>
			<AsamButton type="default" native-type="button" @click="shown = true"
				>重置提示</AsamButton
			>
		</div>
		<AsamAlert
			v-if="shown"
			title="数据导入结果"
			:type="kind"
			description="请确认导入内容后继续。"
			show-icon
			@close="shown = false"
		/>
		<p class="example-paragraph" role="status">{{ shown ? '提示显示中' : '提示已关闭' }}</p>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamAlertBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamAlert } from '@asam-ui/ui';
const kind = ref<'success' | 'info' | 'warning' | 'error'>('info');
const shown = ref(true);
</script>

<style scoped>
.demo {
	display: grid;
	gap: var(--asam-space-md);
}

.demo > .asam-button {
	justify-self: start;
}

.actions label {
	display: inline-flex;
	align-items: center;
	gap: var(--asam-space-xs);
}

.demo > p {
	margin: 0;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-md);
	align-items: center;
}

.panel {
	padding: var(--asam-space-lg);
	border: 1px solid var(--asam-color-border);
	border-radius: var(--asam-radius-control);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<div class="demo">
		<div class="actions">
			<label>
				<span>状态</span>
				<AsamSelect v-model="kind">
					<AsamOption :label="'success'" :value="'success'">success</AsamOption>
					<AsamOption :label="'info'" :value="'info'">info</AsamOption>
					<AsamOption :label="'warning'" :value="'warning'">warning</AsamOption>
					<AsamOption :label="'error'" :value="'error'">error</AsamOption>
				</AsamSelect>
			</label>
			<AsamButton type="default" native-type="button" @click="shown = true"
				>重置提示</AsamButton
			>
		</div>
		<AsamAlert
			v-if="shown"
			title="数据导入结果"
			:type="kind"
			description="请确认导入内容后继续。"
			show-icon
			@close="shown = false"
		/>
		<p class="example-paragraph" role="status">{{ shown ? '提示显示中' : '提示已关闭' }}</p>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamAlertBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamAlert } from '@asam-ui/ui';
const kind = ref('info');
const shown = ref(true);
</script>

<style scoped>
.demo {
	display: grid;
	gap: var(--asam-space-md);
}

.demo > .asam-button {
	justify-self: start;
}

.actions label {
	display: inline-flex;
	align-items: center;
	gap: var(--asam-space-xs);
}

.demo > p {
	margin: 0;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-md);
	align-items: center;
}

.panel {
	padding: var(--asam-space-lg);
	border: 1px solid var(--asam-color-border);
	border-radius: var(--asam-radius-control);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

图标和内容插槽

图标来自独立 ASAM 图标包，暗色状态与自定义标题分别演示。

图标和内容插槽

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamAlert v-bind="{ type: 'success', effect: 'dark', showIcon: true, closable: false }">
		<template #title>已保存本地草稿</template>
		<template #icon>
			<InfoFilled />
		</template>
		<p class="example-paragraph">草稿可以稍后继续编辑。</p>
	</AsamAlert>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamAlertSlotsDemo' });
import { AsamAlert } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamAlert v-bind="{ type: 'success', effect: 'dark', showIcon: true, closable: false }">
		<template #title>已保存本地草稿</template>
		<template #icon>
			<InfoFilled />
		</template>
		<p class="example-paragraph">草稿可以稍后继续编辑。</p>
	</AsamAlert>
</template>

<script setup>
defineOptions({ name: 'AsamAlertSlotsDemo' });
import { AsamAlert } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

使用约定

通过 type 与 effect 选择语义和明暗效果；title、description、center、showIcon、closable 和 closeText 用于信息层次。close 事件只表示用户关闭，恢复提示由宿主重新挂载。title/default/icon 插槽可定制内容。本入口没有控件密度 size。

完整使用场景

基础用法

Alert 组件不属于浮层元素，不会自动消失或关闭。

Alert 组件提供5种类型，由 type 属性指定，默认值为 info。 primary 已被添加到2.9.11。

基础用法

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="主要提示" type="primary" />
		<AsamAlert title="成功提示" type="success" />
		<AsamAlert title="信息提示" type="info" />
		<AsamAlert title="警告提示" type="warning" />
		<AsamAlert title="错误提示" type="error" />
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamAlertCapBasicDemo' });
import { AsamAlert } from '@asam-ui/ui';
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="主要提示" type="primary" />
		<AsamAlert title="成功提示" type="success" />
		<AsamAlert title="信息提示" type="info" />
		<AsamAlert title="警告提示" type="warning" />
		<AsamAlert title="错误提示" type="error" />
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamAlertCapBasicDemo' });
import { AsamAlert } from '@asam-ui/ui';
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

主题

Alert 组件提供了两个不同的主题：light 和 dark。

通过设置 effect 属性来改变主题，默认为 light。

主题

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="主要提示" type="primary" effect="dark" />
		<AsamAlert title="成功提示" type="success" effect="dark" />
		<AsamAlert title="信息提示" type="info" effect="dark" />
		<AsamAlert title="警告提示" type="warning" effect="dark" />
		<AsamAlert title="错误提示" type="error" effect="dark" />
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamAlertCapThemeDemo' });
import { AsamAlert } from '@asam-ui/ui';
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="主要提示" type="primary" effect="dark" />
		<AsamAlert title="成功提示" type="success" effect="dark" />
		<AsamAlert title="信息提示" type="info" effect="dark" />
		<AsamAlert title="警告提示" type="warning" effect="dark" />
		<AsamAlert title="错误提示" type="error" effect="dark" />
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamAlertCapThemeDemo' });
import { AsamAlert } from '@asam-ui/ui';
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

自定义关闭按钮

你可以自定义关闭按钮为文字或其他符号。

你可以设置 Alert 组件是否为可关闭状态，关闭按钮的内容以及关闭时的回调函数同样可以定制。完整说明。

自定义关闭按钮

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="不可关闭的提示" type="success" :closable="false" />
		<AsamAlert title="自定义关闭文字" type="info" close-text="知道了" />
		<AsamAlert title="带回调的提示" type="warning" @close="hello" />
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamAlertCapCloseButtonDemo' });
import { AsamAlert } from '@asam-ui/ui';

const hello = () => {
	alert('你好！');
};
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="不可关闭的提示" type="success" :closable="false" />
		<AsamAlert title="自定义关闭文字" type="info" close-text="知道了" />
		<AsamAlert title="带回调的提示" type="warning" @close="hello" />
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamAlertCapCloseButtonDemo' });
import { AsamAlert } from '@asam-ui/ui';
const hello = () => {
	alert('你好！');
};
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

使用图标

你可以通过为 Alert 组件添加图标来提高可读性。

通过设置 show-icon 属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。或者你可以使用 icon slot 自定义 icon 内容。

图标

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<div style="max-width: 600px">
		<AsamAlert title="主要提示" type="primary" show-icon />
		<AsamAlert title="成功提示" type="success" show-icon />
		<AsamAlert title="信息提示" type="info" show-icon />
		<AsamAlert title="警告提示" type="warning" show-icon />
		<AsamAlert title="错误提示" type="error" show-icon />
		<AsamAlert title="带自定义图标的错误提示" type="error" show-icon>
			<template #icon>
				<Bell />
			</template>
		</AsamAlert>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamAlertCapIconDemo' });
import { AsamAlert } from '@asam-ui/ui';

import { Bell } from '@asam-ui/icons-vue';
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<div style="max-width: 600px">
		<AsamAlert title="主要提示" type="primary" show-icon />
		<AsamAlert title="成功提示" type="success" show-icon />
		<AsamAlert title="信息提示" type="info" show-icon />
		<AsamAlert title="警告提示" type="warning" show-icon />
		<AsamAlert title="错误提示" type="error" show-icon />
		<AsamAlert title="带自定义图标的错误提示" type="error" show-icon>
			<template #icon>
				<Bell />
			</template>
		</AsamAlert>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamAlertCapIconDemo' });
import { AsamAlert } from '@asam-ui/ui';
import { Bell } from '@asam-ui/icons-vue';
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

文字居中

使用 center 属性来让文字水平居中。

居中的步骤条

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="主要提示" type="primary" center show-icon />
		<AsamAlert title="成功提示" type="success" center show-icon />
		<AsamAlert title="信息提示" type="info" center show-icon />
		<AsamAlert title="警告提示" type="warning" center show-icon />
		<AsamAlert title="错误提示" type="error" center show-icon />
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamAlertCapCenterDemo' });
import { AsamAlert } from '@asam-ui/ui';
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="主要提示" type="primary" center show-icon />
		<AsamAlert title="成功提示" type="success" center show-icon />
		<AsamAlert title="信息提示" type="info" center show-icon />
		<AsamAlert title="警告提示" type="warning" center show-icon />
		<AsamAlert title="错误提示" type="error" center show-icon />
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamAlertCapCenterDemo' });
import { AsamAlert } from '@asam-ui/ui';
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

文字描述

为 Alert 组件添加一个更加详细的描述来使用户了解更多信息。

除了必填的 title 属性外，你可以设置 description 属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放文本内容，当内容超出长度限制时会自动换行显示。

文字描述

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="带说明" type="success" description="这是一段说明。" />
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamAlertCapDescriptionDemo' });
import { AsamAlert } from '@asam-ui/ui';
</script>

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="带说明" type="success" description="这是一段说明。" />
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamAlertCapDescriptionDemo' });
import { AsamAlert } from '@asam-ui/ui';
</script>

带图标和描述

在最后, 这是一个带有图标和描述的例子。

带图标和描述

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="主要提示" type="primary" description="更多文字说明" show-icon />
		<AsamAlert title="成功提示" type="success" description="更多文字说明" show-icon />
		<AsamAlert title="信息提示" type="info" description="更多文字说明" show-icon />
		<AsamAlert title="警告提示" type="warning" description="更多文字说明" show-icon />
		<AsamAlert title="错误提示" type="error" description="更多文字说明" show-icon />
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamAlertCapIconDescriptionDemo' });
import { AsamAlert } from '@asam-ui/ui';
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

许可

vue

<template>
	<div style="max-width: 600px">
		<AsamAlert title="主要提示" type="primary" description="更多文字说明" show-icon />
		<AsamAlert title="成功提示" type="success" description="更多文字说明" show-icon />
		<AsamAlert title="信息提示" type="info" description="更多文字说明" show-icon />
		<AsamAlert title="警告提示" type="warning" description="更多文字说明" show-icon />
		<AsamAlert title="错误提示" type="error" description="更多文字说明" show-icon />
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamAlertCapIconDescriptionDemo' });
import { AsamAlert } from '@asam-ui/ui';
</script>

<style scoped>
.el-alert {
	margin: 20px 0 0;
}

.el-alert:first-child {
	margin: 0;
}
</style>

API

属性 `AsamAlertProps`

属性名	说明	类型	默认值
`title`	标题的内容	`string \| undefined`	`""`
`description`	描述性文本	`string \| undefined`	`""`
`type`	Alert 类型。	`enum"primary" \| "success" \| "warning" \| "info" \| "error"`完整类型：`"primary" \| "success" \| "warning" \| "info" \| "error" \| undefined`	`"info"`
`closable`	是否可以关闭	`boolean \| undefined`	`true`
`closeText`	替代关闭按钮的文字。	`string \| undefined`	`""`
`showIcon`	是否显示图标。	`boolean \| undefined`	`false`
`center`	内容是否居中。	`boolean \| undefined`	`false`
`effect`	主题样式	`enum"light" \| "dark"`完整类型：`"light" \| "dark" \| undefined`	`"light"`

事件 `AsamAlertEmits`

属性名	说明	类型	默认值
`close`	—	`[event: MouseEvent]`	—

插槽 `AsamAlertSlots`

属性名	说明	类型	默认值
`default`	—	`(() => unknown) \| undefined`	—
`title`	—	`(() => unknown) \| undefined`	—
`icon`	—	`(() => unknown) \| undefined`	—

用法与契约补充说明

自定义关闭按钮

你可以设置 Alert 组件是否为可关闭状态，关闭按钮的内容以及关闭时的回调函数同样可以定制。 closable 属性决定 Alert 组件是否可关闭，该属性接受一个 Boolean，默认为 false。你可以设置 close-text 属性来代替右侧的关闭图标，需要注意的是 close-text 必须是一个字符串。当 Alert 组件被关闭时会触发 close 事件。

参数与事件补充说明

固定 2.14.7 的全部警告参数，沿用上游默认值。

参数与事件说明

`title`

必填：否；声明来源：上游声明。

默认值与来源

""（已安装运行时；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`description`

必填：否；声明来源：上游声明。

默认值与来源

""（已安装运行时；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`type`

必填：否；声明来源：上游声明。

type 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："primary" / "success" / "warning" / "info" / "error"

默认值与来源

"info"（已安装运行时；已安装组件）

固定上游文档默认：info（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：'info'（2.14.7；源码事实，未作为 ASAM 运行实测）

`closable`

必填：否；声明来源：上游声明。

closable 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

true（已安装运行时；已安装组件）

固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）

`closeText`

必填：否；声明来源：上游声明。

默认值与来源

""（已安装运行时；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`showIcon`

必填：否；声明来源：上游声明。

showIcon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（已安装运行时；已安装组件）

固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`center`

必填：否；声明来源：上游声明。

center 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（已安装运行时；已安装组件）

固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`effect`

必填：否；声明来源：上游声明。

effect 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："light" / "dark"

默认值与来源

"light"（已安装运行时；已安装组件）

固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：'light'（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamAlertProps 公开类型视图

import type { AsamAlertProps } from '@asam-ui/ui';

// AsamAlertProps
type PublicContract = {
	"title"?: string | undefined;
	"description"?: string | undefined;
	"type"?: "primary" | "success" | "warning" | "info" | "error" | undefined;
	"closable"?: boolean | undefined;
	"closeText"?: string | undefined;
	"showIcon"?: boolean | undefined;
	"center"?: boolean | undefined;
	"effect"?: "light" | "dark" | undefined;
};

参数与事件说明

`close`

必填：是；声明来源：ASAM 声明。

AsamAlertEmits 公开类型视图

import type { AsamAlertEmits } from '@asam-ui/ui';

// AsamAlertEmits
type PublicContract = {
	"close": [event: MouseEvent];
};

参数与事件说明

`default`

必填：否；声明来源：ASAM 声明。

default 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): unknown

`title`

必填：否；声明来源：ASAM 声明。

title 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): unknown

`icon`

必填：否；声明来源：ASAM 声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): unknown

AsamAlertSlots 公开类型视图

import type { AsamAlertSlots } from '@asam-ui/ui';

// AsamAlertSlots
type PublicContract = {
	"default"?: (() => unknown) | undefined;
	"title"?: (() => unknown) | undefined;
	"icon"?: (() => unknown) | undefined;
};

警告提示 AsamAlert

使用场景 ​

状态与关闭 ​

状态与关闭

图标和内容插槽 ​

图标和内容插槽

使用约定 ​

完整使用场景 ​

基础用法 ​

基础用法

主题 ​

主题

自定义关闭按钮 ​

自定义关闭按钮

使用图标 ​

图标

文字居中 ​

居中的步骤条

文字描述 ​

文字描述

带图标和描述 ​

带图标和描述

API

属性 AsamAlertProps

事件 AsamAlertEmits

插槽 AsamAlertSlots

用法与契约补充说明 ​

自定义关闭按钮 ​

关联组件

参数与事件说明

title

默认值与来源

description

默认值与来源

type

默认值与来源

closable

默认值与来源

closeText

默认值与来源

showIcon

默认值与来源

center

默认值与来源

effect

默认值与来源

参数与事件说明

close

参数与事件说明

default

title

icon

使用场景

状态与关闭

图标和内容插槽

使用约定

完整使用场景

基础用法

主题

自定义关闭按钮

使用图标

文字居中

文字描述

带图标和描述

属性 `AsamAlertProps`

事件 `AsamAlertEmits`

插槽 `AsamAlertSlots`

用法与契约补充说明

自定义关闭按钮

`title`

`description`

`type`

`closable`

`closeText`

`showIcon`

`center`

`effect`

`close`

`default`

`title`

`icon`