使用场景
统一排列保存与取消动作，提供加载、禁用、对齐与原生提交语义。默认按钮来自 ASAM Button。
保存、取消与加载
save/cancel 携带 MouseEvent。saving 表示提交中并阻止取消，disabled 禁止两个按钮；应用在请求结束后恢复 saving。
保存、取消与加载
vue
<template>
<div class="example">
<AsamFormActions
v-bind="{
...{ saving: saving, disabled: disabled },
...{ align: 'start', 'save-text': '确认保存', 'cancel-text': '返回' }
}"
@save="save"
@cancel="event = 'cancel'"
/>
<AsamCheckboxItem v-model="disabled"> 禁止操作 </AsamCheckboxItem>
<output>{{ event }}；saving：{{ saving }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamFormActionsBasicExample' });
import { ref } from 'vue';
import { AsamFormActions, AsamCheckboxItem } from '@asam-ui/ui';
const saving = ref(false);
const disabled = ref(false);
const event = ref('尚未操作');
async function save() {
saving.value = true;
try {
await new Promise((resolve) => setTimeout(resolve, 250));
event.value = 'save';
} finally {
saving.value = false;
}
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamFormActions
v-bind="{
...{ saving: saving, disabled: disabled },
...{ align: 'start', 'save-text': '确认保存', 'cancel-text': '返回' }
}"
@save="save"
@cancel="event = 'cancel'"
/>
<AsamCheckboxItem v-model="disabled"> 禁止操作 </AsamCheckboxItem>
<output>{{ event }}；saving：{{ saving }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamFormActionsBasicExample' });
import { ref } from 'vue';
import { AsamFormActions, AsamCheckboxItem } from '@asam-ui/ui';
const saving = ref(false);
const disabled = ref(false);
const event = ref('尚未操作');
async function save() {
saving.value = true;
try {
await new Promise((resolve) => setTimeout(resolve, 250));
event.value = 'save';
} finally {
saving.value = false;
}
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>附加操作与完整替换
leading 放左侧内容；save/cancel 只替换默认按钮文字。default 完全替换按钮区，此时应用自行绑定事件、禁用和加载。
附加操作与完整替换
vue
<template>
<div class="example">
<AsamFormActions align="center" @save="event = 'save'" @cancel="event = 'cancel'">
<template #leading> 尚有未保存更改 </template>
<template #save> 保存草稿 </template>
<template #cancel> 放弃更改 </template>
</AsamFormActions>
<AsamFormActions align="end">
<AsamButton type="default" @click="event = 'preview'"> 预览 </AsamButton>
<AsamButton type="default" @click="event = 'publish-local'"> 本地确认 </AsamButton>
</AsamFormActions>
<output>{{ event }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamFormActionsSlotsExample' });
import { ref } from 'vue';
import { AsamFormActions, AsamButton } from '@asam-ui/ui';
const event = ref('尚未操作');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamFormActions align="center" @save="event = 'save'" @cancel="event = 'cancel'">
<template #leading> 尚有未保存更改 </template>
<template #save> 保存草稿 </template>
<template #cancel> 放弃更改 </template>
</AsamFormActions>
<AsamFormActions align="end">
<AsamButton type="default" @click="event = 'preview'"> 预览 </AsamButton>
<AsamButton type="default" @click="event = 'publish-local'"> 本地确认 </AsamButton>
</AsamFormActions>
<output>{{ event }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamFormActionsSlotsExample' });
import { ref } from 'vue';
import { AsamFormActions, AsamButton } from '@asam-ui/ui';
const event = ref('尚未操作');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档尺寸与上下文继承
四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。
四档尺寸与上下文继承
vue
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamFormActions size="large" />
</section>
<section data-density="big">
<strong> big </strong>
<AsamFormActions size="big" />
</section>
<section data-density="default">
<strong> default </strong>
<AsamFormActions size="default" />
</section>
<section data-density="small">
<strong> small </strong>
<AsamFormActions size="small" />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamFormActions />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamFormActionsSizesExample' });
import { ref } from 'vue';
import { AsamFormActions, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamFormActions size="large" />
</section>
<section data-density="big">
<strong> big </strong>
<AsamFormActions size="big" />
</section>
<section data-density="default">
<strong> default </strong>
<AsamFormActions size="default" />
</section>
<section data-density="small">
<strong> small </strong>
<AsamFormActions size="small" />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamFormActions />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamFormActionsSizesExample' });
import { ref } from 'vue';
import { AsamFormActions, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
ASAM 操作区通过组上下文向默认按钮提供四档 size。submitNativeType 默认为 button；设为 submit 时放在真实表单内监听表单 submit，避免 save 再次提交。组件没有公开 expose。
API 阅读方式
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
API
属性 AsamFormActionsProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
saveText | — | string | undefined | '保存' |
cancelText | — | string | undefined | '取消' |
saving | — | boolean | undefined | false |
disabled | — | boolean | undefined | false |
align | — | enum"start" | "center" | "end"完整类型："start" | "center" | "end" | undefined | 'end' |
submitNativeType | — | enum"button" | "submit"完整类型："button" | "submit" | undefined | 'button' |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
事件 AsamFormActionsEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
save | — | [event: MouseEvent] | — |
cancel | — | [event: MouseEvent] | — |
插槽 AsamFormActionsSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
leading | — | (() => unknown) | undefined | — |
save | — | (() => unknown) | undefined | — |
cancel | — | (() => unknown) | undefined | — |
关联组件
参数与事件补充说明
参数与事件说明
saveText
必填：否；声明来源：ASAM 声明。
默认值与来源
'保存'（源码表达式；ASAM 声明）cancelText
必填：否；声明来源：ASAM 声明。
默认值与来源
'取消'（源码表达式；ASAM 声明）saving
必填：否；声明来源：ASAM 声明。
saving 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（源码表达式；ASAM 声明）disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（源码表达式；ASAM 声明）align
必填：否；声明来源：ASAM 声明。
align 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："start" / "center" / "end"
默认值与来源
'end'（源码表达式；ASAM 声明）submitNativeType
必填：否；声明来源：ASAM 声明。
submitNativeType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："button" / "submit"
默认值与来源
'button'（源码表达式；ASAM 声明）size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
AsamFormActionsProps 公开类型视图
ts
import type { AsamFormActionsProps, AsamControlSize } from '@asam-ui/ui';
// AsamFormActionsProps
type PublicContract = {
"saveText"?: string | undefined;
"cancelText"?: string | undefined;
"saving"?: boolean | undefined;
"disabled"?: boolean | undefined;
"align"?: "start" | "center" | "end" | undefined;
"submitNativeType"?: "button" | "submit" | undefined;
"size"?: AsamControlSize | undefined;
};参数与事件说明
save
必填：是；声明来源：ASAM 声明。
cancel
必填：是；声明来源：ASAM 声明。
AsamFormActionsEmits 公开类型视图
ts
import type { AsamFormActionsEmits } from '@asam-ui/ui';
// AsamFormActionsEmits
type PublicContract = {
"save": [event: MouseEvent];
"cancel": [event: MouseEvent];
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
leading
必填：否；声明来源：ASAM 声明。
leading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
save
必填：否；声明来源：ASAM 声明。
save 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
cancel
必填：否；声明来源：ASAM 声明。
cancel 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamFormActionsSlots 公开类型视图
ts
import type { AsamFormActionsSlots } from '@asam-ui/ui';
// AsamFormActionsSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
"leading"?: (() => unknown) | undefined;
"save"?: (() => unknown) | undefined;
"cancel"?: (() => unknown) | undefined;
};