使用场景
在独立浮层中完成短流程或确认操作，以 v-model 控制显隐。
受控显隐与标题图标
点击打开，使用底部完成按钮或关闭按钮关闭；焦点返回打开按钮。
受控显隐与标题图标
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamButton type="default" native-type="button" @click="open = true">打开对话框</AsamButton>
<AsamDialog
v-model="open"
title="保存草稿"
size="mini"
:icon="InfoFilled"
:close-on-click-modal="false"
@closed="closed++"
>
<p class="example-paragraph">对话框内容由宿主维护。</p>
<template #footer>
<AsamButton type="default" native-type="button" @click="open = false"
>完成并关闭</AsamButton
>
</template>
</AsamDialog>
<p class="example-paragraph" role="status">关闭完成 {{ closed }} 次</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDialogBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const open = ref(false);
const closed = ref(0);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamButton type="default" native-type="button" @click="open = true">打开对话框</AsamButton>
<AsamDialog
v-model="open"
title="保存草稿"
size="mini"
:icon="InfoFilled"
:close-on-click-modal="false"
@closed="closed++"
>
<p class="example-paragraph">对话框内容由宿主维护。</p>
<template #footer>
<AsamButton type="default" native-type="button" @click="open = false"
>完成并关闭</AsamButton
>
</template>
</AsamDialog>
<p class="example-paragraph" role="status">关闭完成 {{ closed }} 次</p>
</template>
<script setup>
defineOptions({ name: 'AsamDialogBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const open = ref(false);
const closed = ref(0);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>关闭确认与公开方法
存在未保存内容时，关闭按钮进入确认步骤；确认后调用保存的 done。取消确认继续编辑。
关闭确认与公开方法
vue
<template>
<AsamButton type="default" native-type="button" @click="open = true">打开待保存内容</AsamButton>
<AsamDialog
ref="dialog"
v-model="open"
title="未保存内容"
width="min(90vw, 500px)"
:before-close="guard"
>
<p class="example-paragraph">确认丢弃后才关闭。</p>
<div v-if="pending" class="actions">
<AsamButton type="default" native-type="button" @click="approve">确认丢弃</AsamButton>
<AsamButton type="default" native-type="button" @click="pending = null"
>继续编辑</AsamButton
>
</div>
<template #footer>
<AsamButton type="default" native-type="button" @click="dialog?.handleClose()"
>请求关闭</AsamButton
>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDialogCloseGuardDemo' });
import { ref, shallowRef } from 'vue';
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import type { AsamDialogExpose } from '@asam-ui/ui';
const open = ref(false);
const dialog = shallowRef<AsamDialogExpose>();
const pending = shallowRef<(() => void) | null>(null);
const guard = (done: () => void) => {
pending.value = done;
};
const approve = () => {
pending.value?.();
pending.value = null;
};
</script>
<style scoped>
.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>
<AsamButton type="default" native-type="button" @click="open = true">打开待保存内容</AsamButton>
<AsamDialog
ref="dialog"
v-model="open"
title="未保存内容"
width="min(90vw, 500px)"
:before-close="guard"
>
<p class="example-paragraph">确认丢弃后才关闭。</p>
<div v-if="pending" class="actions">
<AsamButton type="default" native-type="button" @click="approve">确认丢弃</AsamButton>
<AsamButton type="default" native-type="button" @click="pending = null"
>继续编辑</AsamButton
>
</div>
<template #footer>
<AsamButton type="default" native-type="button" @click="dialog?.handleClose()"
>请求关闭</AsamButton
>
</template>
</AsamDialog>
</template>
<script setup>
defineOptions({ name: 'AsamDialogCloseGuardDemo' });
import { ref, shallowRef } from 'vue';
import { AsamButton, AsamDialog } from '@asam-ui/ui';
const open = ref(false);
const dialog = shallowRef();
const pending = shallowRef(null);
const guard = (done) => {
pending.value = done;
};
const approve = () => {
pending.value?.();
pending.value = null;
};
</script>
<style scoped>
.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>多文件表单与完成关闭
正文由独立 DraftFields.vue 提供；TS/JS 均展示并运行两个原生 SFC。
多文件表单与完成关闭
vue
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = {
class: "example-paragraph",
role: "status"
};
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const DraftFields_vue_1: any = __importDefault(require("./DraftFields.vue"));
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamDialogEditorDemo' },
__name: 'Demo',
setup(__props?: any) {
const open: any = (0, vue_3.ref)(false);
const draft: any = (0, vue_3.ref)('周报草稿');
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)(vue_2.Fragment, null, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[0] || (_cache[0] = ($event?: any) => (open.value = true))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("编辑本地草稿", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamDialog), {
modelValue: open.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event?: any) => ((open).value = $event)),
title: "草稿编辑",
size: "mini"
}, {
footer: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = ($event?: any) => (open.value = false))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("保存草稿", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)(DraftFields_vue_1.default, {
modelValue: draft.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((draft).value = $event))
}, null, 8 /* PROPS */, ["modelValue"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createElementVNode)("p", _hoisted_1, "草稿名称：" + (0, vue_2.toDisplayString)(draft.value), 1 /* TEXT */)
], 64 /* STABLE_FRAGMENT */));
};
}
});
exports.default.__scopeId = "data-v-51642c8d";
},
"DraftFields.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'DraftFields',
props: {
"modelValue": { type: String, ...{ required: true } },
"modelModifiers": {},
},
emits: ["update:modelValue"],
setup(__props?: any) {
const draft: any = (0, vue_1.useModel)(__props, "modelValue");
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("label", null, [
_cache[1] || (_cache[1] = (0, vue_2.createTextVNode)("草稿名称 ", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamInput), {
modelValue: draft.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((draft).value = $event))
}, null, 8 /* PROPS */, ["modelValue"])
]));
};
}
});
},
};
const __dependencies: any = {"Demo.vue":{"./DraftFields.vue":"DraftFields.vue"},"DraftFields.vue":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
p[data-v-51642c8d]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = {
class: "example-paragraph",
role: "status"
};
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const DraftFields_vue_1 = __importDefault(require("./DraftFields.vue"));
exports.default = Object.assign({ name: 'AsamDialogEditorDemo' }, {
__name: 'Demo',
setup(__props) {
const open = (0, vue_2.ref)(false);
const draft = (0, vue_2.ref)('周报草稿');
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)(vue_1.Fragment, null, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[0] || (_cache[0] = $event => (open.value = true))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("编辑本地草稿", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamDialog), {
modelValue: open.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = $event => ((open).value = $event)),
title: "草稿编辑",
size: "mini"
}, {
footer: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = $event => (open.value = false))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("保存草稿", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)(DraftFields_vue_1.default, {
modelValue: draft.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((draft).value = $event))
}, null, 8 /* PROPS */, ["modelValue"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createElementVNode)("p", _hoisted_1, "草稿名称：" + (0, vue_1.toDisplayString)(draft.value), 1 /* TEXT */)
], 64 /* STABLE_FRAGMENT */));
};
}
});
exports.default.__scopeId = "data-v-43467044";
},
"DraftFields.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'DraftFields',
props: {
"modelValue": { type: String, required: true },
"modelModifiers": {},
},
emits: ["update:modelValue"],
setup(__props) {
const draft = (0, vue_1.useModel)(__props, "modelValue");
return (_ctx, _cache) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("label", null, [
_cache[1] || (_cache[1] = (0, vue_2.createTextVNode)("草稿名称 ", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamInput), {
modelValue: draft.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((draft).value = $event))
}, null, 8 /* PROPS */, ["modelValue"])
]));
};
}
};
},
};
const __dependencies = {"Demo.vue":{"./DraftFields.vue":"DraftFields.vue"},"DraftFields.vue":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
p[data-v-43467044]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>独立浮层尺寸
逐个选择实际宽度档位，显式 width 用于覆盖尺寸值；窄屏由组件样式约束。
独立浮层尺寸
vue
<template>
<div class="actions">
<label>
<span>浮层尺寸</span>
<AsamSelect v-model="size">
<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
value
}}</AsamOption>
</AsamSelect>
</label>
<AsamButton type="default" native-type="button" @click="open = true"
>打开所选尺寸</AsamButton
>
</div>
<AsamDialog v-model="open" title="独立浮层尺寸" :size="size">
<p class="example-paragraph">当前宽度档位 {{ size }}</p>
</AsamDialog>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDialogDimensionsDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamDialog } from '@asam-ui/ui';
import type { AsamDialogSize } from '@asam-ui/ui';
const sizes: AsamDialogSize[] = ['default', 'small', 'mini', 'large'];
const size = ref<AsamDialogSize>('mini');
const open = ref(false);
</script>
<style scoped>
.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="actions">
<label>
<span>浮层尺寸</span>
<AsamSelect v-model="size">
<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
value
}}</AsamOption>
</AsamSelect>
</label>
<AsamButton type="default" native-type="button" @click="open = true"
>打开所选尺寸</AsamButton
>
</div>
<AsamDialog v-model="open" title="独立浮层尺寸" :size="size">
<p class="example-paragraph">当前宽度档位 {{ size }}</p>
</AsamDialog>
</template>
<script setup>
defineOptions({ name: 'AsamDialogDimensionsDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamDialog } from '@asam-ui/ui';
const sizes = ['default', 'small', 'mini', 'large'];
const size = ref('mini');
const open = ref(false);
</script>
<style scoped>
.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>使用约定
header、icon、default、footer 插槽分别承载标题、标识、正文和操作。 完整说明。
完整用法
以下用法使用本库公开入口。每个示例提供完整 TS/JS SFC，参数、事件、插槽和实例类型见本页 API。服务实例由创建方负责关闭；HTML 内容仅用于调用方已知的可信字符串。
显隐与关闭守卫
显隐与关闭守卫
vue
<template>
<AsamButton type="default" @click="dialogVisible = true"> 点击打开对话框 </AsamButton>
<AsamDialog v-model="dialogVisible" title="提示" width="500" :before-close="handleClose">
<span>这是一条消息。</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog, AsamMessageBox } from '@asam-ui/ui';
import { ref } from 'vue';
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
AsamMessageBox.confirm('确定关闭当前对话框吗？')
.then(() => {
done();
})
.catch(() => {
// catch error
});
};
</script>vue
<template>
<AsamButton type="default" @click="dialogVisible = true"> 点击打开对话框 </AsamButton>
<AsamDialog v-model="dialogVisible" title="提示" width="500" :before-close="handleClose">
<span>这是一条消息。</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog, AsamMessageBox } from '@asam-ui/ui';
import { ref } from 'vue';
const dialogVisible = ref(false);
const handleClose = (done) => {
AsamMessageBox.confirm('确定关闭当前对话框吗？')
.then(() => {
done();
})
.catch(() => {
// catch error
});
};
</script>表单与表格内容
表单与表格内容
vue
<template>
<div class="flex flex-wrap demo-gap">
<AsamButton type="default" class="!ml-0" @click="dialogTableVisible = true">
打开含嵌套表格的对话框
</AsamButton>
<AsamButton type="default" class="!ml-0" @click="dialogFormVisible = true">
打开含嵌套表单的对话框
</AsamButton>
</div>
<AsamDialog v-model="dialogTableVisible" title="收货地址" width="800">
<AsamTable :data="gridData">
<AsamTableColumn property="date" label="日期" width="150" />
<AsamTableColumn property="name" label="姓名" width="200" />
<AsamTableColumn property="address" label="地址" />
</AsamTable>
</AsamDialog>
<AsamDialog v-model="dialogFormVisible" title="收货地址" width="500">
<AsamBaseForm :model="form">
<AsamFormItem label="活动名称" :label-width="formLabelWidth">
<AsamInput
:model-value="form.name"
@update:model-value="form.name = String($event ?? '')"
autocomplete="off"
/>
</AsamFormItem>
<AsamFormItem label="区域" :label-width="formLabelWidth">
<AsamSelect
:model-value="form.region"
@update:model-value="form.region = String($event ?? '')"
placeholder="请选择区域"
>
<AsamOption label="区域 1" value="shanghai" />
<AsamOption label="区域 2" value="beijing" />
</AsamSelect>
</AsamFormItem>
</AsamBaseForm>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogFormVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogFormVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import {
AsamBaseForm,
AsamButton,
AsamDialog,
AsamFormItem,
AsamInput,
AsamOption,
AsamSelect,
AsamTable,
AsamTableColumn
} from '@asam-ui/ui';
import { reactive, ref } from 'vue';
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const form = reactive({
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
});
const gridData = [
{
date: '2016-05-02',
name: '约翰·史密斯',
address: '普陀区金沙江路 1518 号'
},
{
date: '2016-05-04',
name: '约翰·史密斯',
address: '普陀区金沙江路 1518 号'
},
{
date: '2016-05-01',
name: '约翰·史密斯',
address: '普陀区金沙江路 1518 号'
},
{
date: '2016-05-03',
name: '约翰·史密斯',
address: '普陀区金沙江路 1518 号'
}
];
</script>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.demo-gap {
gap: var(--asam-space-sm);
}
</style>vue
<template>
<div class="flex flex-wrap demo-gap">
<AsamButton type="default" class="!ml-0" @click="dialogTableVisible = true">
打开含嵌套表格的对话框
</AsamButton>
<AsamButton type="default" class="!ml-0" @click="dialogFormVisible = true">
打开含嵌套表单的对话框
</AsamButton>
</div>
<AsamDialog v-model="dialogTableVisible" title="收货地址" width="800">
<AsamTable :data="gridData">
<AsamTableColumn property="date" label="日期" width="150" />
<AsamTableColumn property="name" label="姓名" width="200" />
<AsamTableColumn property="address" label="地址" />
</AsamTable>
</AsamDialog>
<AsamDialog v-model="dialogFormVisible" title="收货地址" width="500">
<AsamBaseForm :model="form">
<AsamFormItem label="活动名称" :label-width="formLabelWidth">
<AsamInput
:model-value="form.name"
@update:model-value="form.name = String($event ?? '')"
autocomplete="off"
/>
</AsamFormItem>
<AsamFormItem label="区域" :label-width="formLabelWidth">
<AsamSelect
:model-value="form.region"
@update:model-value="form.region = String($event ?? '')"
placeholder="请选择区域"
>
<AsamOption label="区域 1" value="shanghai" />
<AsamOption label="区域 2" value="beijing" />
</AsamSelect>
</AsamFormItem>
</AsamBaseForm>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogFormVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogFormVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script setup>
import {
AsamBaseForm,
AsamButton,
AsamDialog,
AsamFormItem,
AsamInput,
AsamOption,
AsamSelect,
AsamTable,
AsamTableColumn
} from '@asam-ui/ui';
import { reactive, ref } from 'vue';
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const form = reactive({
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
});
const gridData = [
{
date: '2016-05-02',
name: '约翰·史密斯',
address: '普陀区金沙江路 1518 号'
},
{
date: '2016-05-04',
name: '约翰·史密斯',
address: '普陀区金沙江路 1518 号'
},
{
date: '2016-05-01',
name: '约翰·史密斯',
address: '普陀区金沙江路 1518 号'
},
{
date: '2016-05-03',
name: '约翰·史密斯',
address: '普陀区金沙江路 1518 号'
}
];
</script>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.demo-gap {
gap: var(--asam-space-sm);
}
</style>标题插槽
标题插槽
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamButton type="default" @click="visible = true"> 打开自定义头部的对话框 </AsamButton>
<AsamDialog v-model="visible" :show-close="false" width="500">
<template #header="{ close, titleId, titleClass }">
<div class="my-header">
<h4 :id="titleId" :class="titleClass">自定义头部示例</h4>
<AsamButton type="default" @click="close">
<AsamIcon class="el-icon--left"><CircleCloseFilled /></AsamIcon>
关闭
</AsamButton>
</div>
</template>
这是对话框内容。
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog, AsamIcon } from '@asam-ui/ui';
import { ref } from 'vue';
import { CircleCloseFilled } from '@asam-ui/icons-vue';
const visible = ref(false);
</script>
<style scoped>
.my-header {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 16px;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamButton type="default" @click="visible = true"> 打开自定义头部的对话框 </AsamButton>
<AsamDialog v-model="visible" :show-close="false" width="500">
<template #header="{ close, titleId, titleClass }">
<div class="my-header">
<h4 :id="titleId" :class="titleClass">自定义头部示例</h4>
<AsamButton type="default" @click="close">
<AsamIcon class="el-icon--left"><CircleCloseFilled /></AsamIcon>
关闭
</AsamButton>
</div>
</template>
这是对话框内容。
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog, AsamIcon } from '@asam-ui/ui';
import { ref } from 'vue';
import { CircleCloseFilled } from '@asam-ui/icons-vue';
const visible = ref(false);
</script>
<style scoped>
.my-header {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 16px;
}
</style>嵌套弹窗
嵌套弹窗
vue
<template>
<AsamButton type="default" @click="outerVisible = true"> 打开外层对话框 </AsamButton>
<AsamDialog v-model="outerVisible" title="外层对话框" width="800">
<span>这是外层对话框。</span>
<AsamDialog v-model="innerVisible" width="500" title="内层对话框" append-to-body>
<span>这是内层对话框。</span>
</AsamDialog>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="outerVisible = false">取消</AsamButton>
<AsamButton type="default" @click="innerVisible = true">
打开内层对话框
</AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const outerVisible = ref(false);
const innerVisible = ref(false);
</script>vue
<template>
<AsamButton type="default" @click="outerVisible = true"> 打开外层对话框 </AsamButton>
<AsamDialog v-model="outerVisible" title="外层对话框" width="800">
<span>这是外层对话框。</span>
<AsamDialog v-model="innerVisible" width="500" title="内层对话框" append-to-body>
<span>这是内层对话框。</span>
</AsamDialog>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="outerVisible = false">取消</AsamButton>
<AsamButton type="default" @click="innerVisible = true">
打开内层对话框
</AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const outerVisible = ref(false);
const innerVisible = ref(false);
</script>居中内容
居中内容
vue
<template>
<AsamButton type="default" @click="centerDialogVisible = true">
点击打开对话框
</AsamButton>
<AsamDialog v-model="centerDialogVisible" title="警告" width="500" center>
<span> 注意：内容默认不会居中对齐。 </span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="centerDialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="centerDialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const centerDialogVisible = ref(false);
</script>vue
<template>
<AsamButton type="default" @click="centerDialogVisible = true">
点击打开对话框
</AsamButton>
<AsamDialog v-model="centerDialogVisible" title="警告" width="500" center>
<span> 注意：内容默认不会居中对齐。 </span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="centerDialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="centerDialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const centerDialogVisible = ref(false);
</script>垂直居中
垂直居中
vue
<template>
<AsamButton type="default" @click="centerDialogVisible = true">
点击打开对话框
</AsamButton>
<AsamDialog v-model="centerDialogVisible" title="警告" width="500" align-center>
<span>从屏幕中央打开对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="centerDialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="centerDialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const centerDialogVisible = ref(false);
</script>vue
<template>
<AsamButton type="default" @click="centerDialogVisible = true">
点击打开对话框
</AsamButton>
<AsamDialog v-model="centerDialogVisible" title="警告" width="500" align-center>
<span>从屏幕中央打开对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="centerDialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="centerDialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const centerDialogVisible = ref(false);
</script>关闭后销毁内容
关闭后销毁内容
vue
<template>
<AsamButton type="default" @click="centerDialogVisible = true">
点击打开对话框
</AsamButton>
<AsamDialog v-model="centerDialogVisible" title="注意" width="500" destroy-on-close center>
<span> 注意：首次打开对话框前，此节点及其下方节点不会渲染。 </span>
<div>
<strong>额外内容（未渲染）</strong>
</div>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="centerDialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="centerDialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const centerDialogVisible = ref(false);
</script>vue
<template>
<AsamButton type="default" @click="centerDialogVisible = true">
点击打开对话框
</AsamButton>
<AsamDialog v-model="centerDialogVisible" title="注意" width="500" destroy-on-close center>
<span> 注意：首次打开对话框前，此节点及其下方节点不会渲染。 </span>
<div>
<strong>额外内容（未渲染）</strong>
</div>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="centerDialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="centerDialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const centerDialogVisible = ref(false);
</script>拖动、溢出与复位
拖动、溢出与复位
vue
<template>
<div class="flex flex-wrap demo-gap">
<AsamButton type="default" class="!ml-0" @click="dialogVisible = true">
打开可拖拽对话框
</AsamButton>
<AsamButton type="default" class="!ml-0" @click="dialogOverflowVisible = true">
打开允许越界拖拽的对话框
</AsamButton>
<AsamButton type="default" class="!ml-0" @click="customDraggingVisible = true">
打开自定义拖拽样式的对话框
</AsamButton>
</div>
<AsamDialog v-model="dialogVisible" title="提示" width="500" draggable>
<span>可拖拽对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
<AsamDialog v-model="dialogOverflowVisible" title="提示" width="500" draggable overflow>
<span>允许越界拖拽的对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogOverflowVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogOverflowVisible = false">
确认
</AsamButton>
</div>
</template>
</AsamDialog>
<AsamDialog
v-model="customDraggingVisible"
class="custom-dragging-style"
title="自定义拖拽样式"
width="500"
draggable
>
<span>此对话框采用自定义拖拽样式，可以拖动查看效果。</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="customDraggingVisible = false">取消</AsamButton>
<AsamButton type="default" @click="customDraggingVisible = false">
确认
</AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const dialogVisible = ref(false);
const dialogOverflowVisible = ref(false);
const customDraggingVisible = ref(false);
</script>
<style scoped>
:global(.custom-dragging-style.is-dragging) {
border: 2px dashed var(--el-color-primary);
opacity: 0.65;
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.demo-gap {
gap: var(--asam-space-sm);
}
</style>vue
<template>
<div class="flex flex-wrap demo-gap">
<AsamButton type="default" class="!ml-0" @click="dialogVisible = true">
打开可拖拽对话框
</AsamButton>
<AsamButton type="default" class="!ml-0" @click="dialogOverflowVisible = true">
打开允许越界拖拽的对话框
</AsamButton>
<AsamButton type="default" class="!ml-0" @click="customDraggingVisible = true">
打开自定义拖拽样式的对话框
</AsamButton>
</div>
<AsamDialog v-model="dialogVisible" title="提示" width="500" draggable>
<span>可拖拽对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
<AsamDialog v-model="dialogOverflowVisible" title="提示" width="500" draggable overflow>
<span>允许越界拖拽的对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogOverflowVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogOverflowVisible = false">
确认
</AsamButton>
</div>
</template>
</AsamDialog>
<AsamDialog
v-model="customDraggingVisible"
class="custom-dragging-style"
title="自定义拖拽样式"
width="500"
draggable
>
<span>此对话框采用自定义拖拽样式，可以拖动查看效果。</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="customDraggingVisible = false">取消</AsamButton>
<AsamButton type="default" @click="customDraggingVisible = false">
确认
</AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const dialogVisible = ref(false);
const dialogOverflowVisible = ref(false);
const customDraggingVisible = ref(false);
</script>
<style scoped>
:global(.custom-dragging-style.is-dragging) {
border: 2px dashed var(--el-color-primary);
opacity: 0.65;
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.demo-gap {
gap: var(--asam-space-sm);
}
</style>全屏
全屏
vue
<template>
<AsamButton type="default" @click="dialogVisible = true"> 打开全屏对话框 </AsamButton>
<AsamDialog v-model="dialogVisible" fullscreen>
<span>全屏对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const dialogVisible = ref(false);
</script>vue
<template>
<AsamButton type="default" @click="dialogVisible = true"> 打开全屏对话框 </AsamButton>
<AsamDialog v-model="dialogVisible" fullscreen>
<span>全屏对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const dialogVisible = ref(false);
</script>遮罩配置
遮罩配置
vue
<template>
<AsamButton type="default" @click="dialogVisible = true"> 打开模态对话框 </AsamButton>
<AsamDialog v-model="dialogVisible" :modal="false" modal-penetrable>
<span>模态对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const dialogVisible = ref(false);
</script>vue
<template>
<AsamButton type="default" @click="dialogVisible = true"> 打开模态对话框 </AsamButton>
<AsamDialog v-model="dialogVisible" :modal="false" modal-penetrable>
<span>模态对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const dialogVisible = ref(false);
</script>自定义动画
自定义动画
vue
<template>
<div>
<AsamButton type="default" @click="openDialog('fade')"> 默认 </AsamButton>
<AsamButton type="default" @click="openDialog('scale')"> 缩放 </AsamButton>
<AsamButton type="default" @click="openDialog('slide')"> 滑动 </AsamButton>
<AsamButton type="default" @click="openDialog('bounce')"> 弹跳 </AsamButton>
<AsamButton type="default" @click="openDialogWithObject"> 对象配置 </AsamButton>
</div>
<AsamDialog
v-model="dialogVisible"
class="custom-transition-dialog"
:title="`${currentAnimation} Animation Dialog`"
width="30%"
:transition="transitionConfig"
>
<div>
<p class="example-paragraph">
当前动画： <strong>{{ currentAnimation }}</strong>
</p>
<p class="example-paragraph">此对话框演示 {{ currentAnimation }} 动画效果。</p>
<p class="example-paragraph" v-if="isObjectConfig">
<strong>使用对象配置：</strong><br />
<code>{{ JSON.stringify(transitionConfig, null, 2) }}</code>
</p>
</div>
<template #footer>
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog, type AsamDialogTransition as DialogTransition } from '@asam-ui/ui';
import { computed, ref } from 'vue';
const dialogVisible = ref(false);
const currentAnimation = ref('fade');
const isObjectConfig = ref(false);
const transitionConfig = computed<DialogTransition>(() => {
if (isObjectConfig.value) {
return {
name: 'dialog-custom-object',
appear: true,
mode: 'out-in',
duration: 500
};
}
return `dialog-${currentAnimation.value}`;
});
const openDialog = (type: string) => {
currentAnimation.value = type;
isObjectConfig.value = false;
dialogVisible.value = true;
};
const openDialogWithObject = () => {
currentAnimation.value = 'object-config';
isObjectConfig.value = true;
dialogVisible.value = true;
};
</script>
<style scoped>
code {
background: var(--el-bg-color-page);
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
display: block;
margin-top: 8px;
}
</style>
<style>
/* Scale Animation */
.dialog-scale-enter-active,
.dialog-scale-leave-active,
.dialog-scale-enter-active .el-dialog,
.dialog-scale-leave-active .el-dialog {
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.dialog-scale-enter-from,
.dialog-scale-leave-to {
opacity: 0;
}
.dialog-scale-enter-from .el-dialog,
.dialog-scale-leave-to .el-dialog {
transform: scale(0.5);
opacity: 0;
}
/* Slide Animation */
.dialog-slide-enter-active,
.dialog-slide-leave-active,
.dialog-slide-enter-active .el-dialog,
.dialog-slide-leave-active .el-dialog {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dialog-slide-enter-from,
.dialog-slide-leave-to {
opacity: 0;
}
.dialog-slide-enter-from .el-dialog,
.dialog-slide-leave-to .el-dialog {
transform: translateY(-100px);
opacity: 0;
}
/* Bounce Animation */
.dialog-bounce-enter-active,
.dialog-bounce-leave-active,
.dialog-bounce-enter-active .el-dialog,
.dialog-bounce-leave-active .el-dialog {
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dialog-bounce-enter-from,
.dialog-bounce-leave-to {
opacity: 0;
}
.dialog-bounce-enter-from .el-dialog,
.dialog-bounce-leave-to .el-dialog {
transform: scale(0.3) translateY(-50px);
opacity: 0;
}
/* Object Configuration Animation */
.dialog-custom-object-enter-active,
.dialog-custom-object-leave-active,
.dialog-custom-object-enter-active .el-dialog,
.dialog-custom-object-leave-active .el-dialog {
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dialog-custom-object-enter-from,
.dialog-custom-object-leave-to {
opacity: 0;
}
.dialog-custom-object-enter-from .el-dialog,
.dialog-custom-object-leave-to .el-dialog {
transform: rotate(180deg) scale(0.5);
opacity: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<div>
<AsamButton type="default" @click="openDialog('fade')"> 默认 </AsamButton>
<AsamButton type="default" @click="openDialog('scale')"> 缩放 </AsamButton>
<AsamButton type="default" @click="openDialog('slide')"> 滑动 </AsamButton>
<AsamButton type="default" @click="openDialog('bounce')"> 弹跳 </AsamButton>
<AsamButton type="default" @click="openDialogWithObject"> 对象配置 </AsamButton>
</div>
<AsamDialog
v-model="dialogVisible"
class="custom-transition-dialog"
:title="`${currentAnimation} Animation Dialog`"
width="30%"
:transition="transitionConfig"
>
<div>
<p class="example-paragraph">
当前动画： <strong>{{ currentAnimation }}</strong>
</p>
<p class="example-paragraph">此对话框演示 {{ currentAnimation }} 动画效果。</p>
<p class="example-paragraph" v-if="isObjectConfig">
<strong>使用对象配置：</strong><br />
<code>{{ JSON.stringify(transitionConfig, null, 2) }}</code>
</p>
</div>
<template #footer>
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</template>
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { computed, ref } from 'vue';
const dialogVisible = ref(false);
const currentAnimation = ref('fade');
const isObjectConfig = ref(false);
const transitionConfig = computed(() => {
if (isObjectConfig.value) {
return {
name: 'dialog-custom-object',
appear: true,
mode: 'out-in',
duration: 500
};
}
return `dialog-${currentAnimation.value}`;
});
const openDialog = (type) => {
currentAnimation.value = type;
isObjectConfig.value = false;
dialogVisible.value = true;
};
const openDialogWithObject = () => {
currentAnimation.value = 'object-config';
isObjectConfig.value = true;
dialogVisible.value = true;
};
</script>
<style scoped>
code {
background: var(--el-bg-color-page);
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
display: block;
margin-top: 8px;
}
</style>
<style>
/* Scale Animation */
.dialog-scale-enter-active,
.dialog-scale-leave-active,
.dialog-scale-enter-active .el-dialog,
.dialog-scale-leave-active .el-dialog {
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.dialog-scale-enter-from,
.dialog-scale-leave-to {
opacity: 0;
}
.dialog-scale-enter-from .el-dialog,
.dialog-scale-leave-to .el-dialog {
transform: scale(0.5);
opacity: 0;
}
/* Slide Animation */
.dialog-slide-enter-active,
.dialog-slide-leave-active,
.dialog-slide-enter-active .el-dialog,
.dialog-slide-leave-active .el-dialog {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dialog-slide-enter-from,
.dialog-slide-leave-to {
opacity: 0;
}
.dialog-slide-enter-from .el-dialog,
.dialog-slide-leave-to .el-dialog {
transform: translateY(-100px);
opacity: 0;
}
/* Bounce Animation */
.dialog-bounce-enter-active,
.dialog-bounce-leave-active,
.dialog-bounce-enter-active .el-dialog,
.dialog-bounce-leave-active .el-dialog {
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dialog-bounce-enter-from,
.dialog-bounce-leave-to {
opacity: 0;
}
.dialog-bounce-enter-from .el-dialog,
.dialog-bounce-leave-to .el-dialog {
transform: scale(0.3) translateY(-50px);
opacity: 0;
}
/* Object Configuration Animation */
.dialog-custom-object-enter-active,
.dialog-custom-object-leave-active,
.dialog-custom-object-enter-active .el-dialog,
.dialog-custom-object-leave-active .el-dialog {
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dialog-custom-object-enter-from,
.dialog-custom-object-leave-to {
opacity: 0;
}
.dialog-custom-object-enter-from .el-dialog,
.dialog-custom-object-leave-to .el-dialog {
transform: rotate(180deg) scale(0.5);
opacity: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>完整交互：events
完整交互：events
vue
<template>
<AsamButton type="default" @click="dialogVisible = true"> 打开事件演示对话框 </AsamButton>
<AsamDialog
v-model="dialogVisible"
modal-class="overide-animation"
:before-close="
(doneFn) => {
(console.log('before-close'), doneFn());
}
"
@open="console.log('open')"
@open-auto-focus="console.log('open-auto-focus')"
@opened="console.log('opened')"
@close="console.log('close')"
@close-auto-focus="console.log('close-auto-focus')"
@closed="console.log('closed')"
>
<span>事件演示对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const dialogVisible = ref(false);
</script>vue
<template>
<AsamButton type="default" @click="dialogVisible = true"> 打开事件演示对话框 </AsamButton>
<AsamDialog
v-model="dialogVisible"
modal-class="overide-animation"
:before-close="
(doneFn) => {
(console.log('before-close'), doneFn());
}
"
@open="console.log('open')"
@open-auto-focus="console.log('open-auto-focus')"
@opened="console.log('opened')"
@close="console.log('close')"
@close-auto-focus="console.log('close-auto-focus')"
@closed="console.log('closed')"
>
<span>事件演示对话框</span>
<template #footer>
<div class="dialog-footer">
<AsamButton type="default" @click="dialogVisible = false">取消</AsamButton>
<AsamButton type="default" @click="dialogVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDialog>
</template>
<script setup>
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { ref } from 'vue';
const dialogVisible = ref(false);
</script>组合职责与生命周期
modelValue 控制显隐，open/opened 与 close/closed 分别观察开始和过渡完成。 完整说明。
原生显隐与焦点
省略 appendToBody 等交互参数使用 原生公开组件 默认值；显式 undefined、null、false 原样传递。打开、关闭、自动聚焦及过渡事件使用原生顺序，关闭守卫、Esc 和焦点回退交由原生处理。ASAM 仅保留标题、图标与尺寸外观，公开实例方法保留原生 this、返回值及实时引用。
自定义 header 直接接收原生 close/titleId/titleClass，并由调用方声明标题节点；组件不额外包裹 heading 或重复设置 titleId。未提供 header 时，默认标题保留 ASAM 的标题、图标与外观。
参数省略时的默认值
closeOnClickModal、closeOnPressEscape、lockScroll、modal、showClose 省略时均由原生组件采用 true。显式提供 false、undefined 或后续移除参数仍按原生契约透传；API 表的默认值描述省略参数，不是包装层的内部布尔转换结果。
局部与全局挂载
局部模式将遮罩限制在演示区域；全局模式使用默认视口范围。 开关显示当前模式，两个模式均可操作；关闭后可以再次切换。
局部与全局挂载
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div ref="mountTarget" class="popup-stage" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<AsamButton type="default" native-type="button" @click="open = true">打开对话框</AsamButton>
<AsamDialog
v-model="open"
title="保存草稿"
size="mini"
:icon="InfoFilled"
:close-on-click-modal="false"
@closed="closed++"
:append-to="globalPopup ? 'body' : mountTarget || 'body'"
:append-to-body="globalPopup"
>
<p class="example-paragraph">对话框内容由宿主维护。</p>
<template #footer>
<AsamButton type="default" native-type="button" @click="open = false"
>完成并关闭</AsamButton
>
</template>
</AsamDialog>
<p class="example-paragraph" role="status">关闭完成 {{ closed }} 次</p>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDialogBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const open = ref(false);
const closed = ref(0);
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef<HTMLElement>();
</script>
<style scoped>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 340px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
.popup-stage.local :deep(.el-overlay) {
position: absolute;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div ref="mountTarget" class="popup-stage" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<AsamButton type="default" native-type="button" @click="open = true">打开对话框</AsamButton>
<AsamDialog
v-model="open"
title="保存草稿"
size="mini"
:icon="InfoFilled"
:close-on-click-modal="false"
@closed="closed++"
:append-to="globalPopup ? 'body' : mountTarget || 'body'"
:append-to-body="globalPopup"
>
<p class="example-paragraph">对话框内容由宿主维护。</p>
<template #footer>
<AsamButton type="default" native-type="button" @click="open = false"
>完成并关闭</AsamButton
>
</template>
</AsamDialog>
<p class="example-paragraph" role="status">关闭完成 {{ closed }} 次</p>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDialogBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamDialog } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const open = ref(false);
const closed = ref(0);
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef();
</script>
<style scoped>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 340px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
.popup-stage.local :deep(.el-overlay) {
position: absolute;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>API
属性 AsamDialogProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
showClose | 省略时采用透传的原生默认值。 | boolean | undefined | true |
modal | 省略时采用透传的原生默认值。 | boolean | undefined | true |
lockScroll | 省略时采用透传的原生默认值。 | boolean | undefined | true |
closeOnPressEscape | 省略时采用透传的原生默认值。 | boolean | undefined | true |
closeOnClickModal | 省略时采用透传的原生默认值。 | boolean | undefined | true |
size | — | enum"large" | "default" | "small" | "mini"完整类型：AsamDialogSize | undefined | — |
icon | — | Component | undefined | — |
zIndex | 和原生的 CSS 的 z-index 相同，改变 z 轴的顺序 | number | undefined | — |
appendTo | 对话框挂载的目标元素。 | string | HTMLElement | undefined | — |
transition | 对话框过渡配置，可以是过渡名称字符串，或 Vue 过渡属性对象。 | AsamDialogTransition | — |
title | Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入 | string | undefined | — |
width | 对话框的宽度，默认值为 50% | string | number | undefined | — |
top | dialog CSS 中的 margin-top 值，默认为 15vh | string | undefined | — |
center | 是否让 Dialog 的 header 和 footer 部分居中排列 | boolean | undefined | false |
modelValue | 是否显示 Dialog | boolean | undefined | false |
alignCenter | 是否水平垂直对齐对话框 | boolean | undefined | false |
headerClass | header 部分的自定义 class 名 | AsamDialogProps["headerClass"] | false |
draggable | 为 Dialog 启用可拖拽功能 | boolean | undefined | false |
bodyClass | body 部分的自定义 class 名 | AsamDialogProps["headerClass"] | false |
footerClass | footer 部分的自定义 class 名 | AsamDialogProps["headerClass"] | false |
appendToBody | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | undefined | false |
beforeClose | 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. | (AsamDialogProps)["beforeClose"] | — |
destroyOnClose | 当关闭 Dialog 时，销毁其中的元素 | boolean | undefined | false |
modalPenetrable | 遮罩是否允许点击穿透。 | boolean | undefined | false |
openDelay | dialog 打开的延时时间，单位毫秒 | number | undefined | — |
closeDelay | dialog 关闭的延时时间，单位毫秒 | number | undefined | — |
modalClass | 遮罩的自定义类名 | AsamDialogProps["headerClass"] | false |
trapFocus | 将焦点限制在对话框内。 | boolean | undefined | false |
headerAriaLevel | header 的 aria-level 属性 | string | undefined | — |
closeIcon | 自定义关闭图标，默认Close | (AsamDialogProps)["closeIcon"] | — |
overflow | 拖动范围可以超出可视区 | boolean | undefined | false |
fullscreen | 是否为全屏 Dialog | boolean | undefined | false |
ariaLevel | header 的 aria-level 属性 | string | undefined | — |
事件 AsamDialogEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: boolean] | — |
open | — | (AsamDialogEmits)["open"] | — |
opened | — | (AsamDialogEmits)["opened"] | — |
close | — | (AsamDialogEmits)["close"] | — |
closed | — | (AsamDialogEmits)["closed"] | — |
openAutoFocus | — | (AsamDialogEmits)["openAutoFocus"] | — |
closeAutoFocus | — | (AsamDialogEmits)["closeAutoFocus"] | — |
插槽 AsamDialogSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
header | — | ((props: { close: () => void; titleId: string; titleClass: string; }) => unknown) | undefined | — |
title | — | (() => unknown) | undefined | — |
icon | — | (() => unknown) | undefined | — |
default | — | (() => unknown) | undefined | — |
footer | — | (() => unknown) | undefined | — |
实例方法与状态 AsamDialogExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
visible | 对话框是否可见。 | boolean | — |
dialogContentRef | — | any | — |
resetPosition | — | () => void | — |
handleClose | — | () => void | — |
类型 AsamDialogSize
类型 AsamDialogTransition
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
name | — | string | undefined | — |
type | — | enum"transition" | "animation"完整类型：PublicMember<AsamDialogTransition, "type"> | — |
css | — | boolean | undefined | — |
duration | — | number | { enter: number; leave: number; } | undefined | — |
enterFromClass | — | string | undefined | — |
enterActiveClass | — | string | undefined | — |
enterToClass | — | string | undefined | — |
appearFromClass | — | string | undefined | — |
appearActiveClass | — | string | undefined | — |
appearToClass | — | string | undefined | — |
leaveFromClass | — | string | undefined | — |
leaveActiveClass | — | string | undefined | — |
leaveToClass | — | string | undefined | — |
mode | — | enum"default" | "in-out" | "out-in"完整类型："default" | "in-out" | "out-in" | undefined | — |
appear | — | boolean | undefined | — |
persisted | — | boolean | undefined | — |
onBeforeEnter | — | PublicMember<AsamDialogTransition, "onBeforeEnter"> | — |
onEnter | — | PublicMember<AsamDialogTransition, "onEnter"> | — |
onAfterEnter | — | PublicMember<AsamDialogTransition, "onAfterEnter"> | — |
onEnterCancelled | — | PublicMember<AsamDialogTransition, "onEnterCancelled"> | — |
onBeforeLeave | — | PublicMember<AsamDialogTransition, "onBeforeLeave"> | — |
onLeave | — | PublicMember<AsamDialogTransition, "onLeave"> | — |
onAfterLeave | — | PublicMember<AsamDialogTransition, "onAfterLeave"> | — |
onLeaveCancelled | — | PublicMember<AsamDialogTransition, "onLeaveCancelled"> | — |
onBeforeAppear | — | PublicMember<AsamDialogTransition, "onBeforeAppear"> | — |
onAppear | — | PublicMember<AsamDialogTransition, "onAppear"> | — |
onAfterAppear | — | PublicMember<AsamDialogTransition, "onAfterAppear"> | — |
onAppearCancelled | — | PublicMember<AsamDialogTransition, "onAppearCancelled"> | — |
用法与契约补充说明
使用约定
header、icon、default、footer 插槽分别承载标题、标识、正文和操作。ASAM 提供默认标题 icon 与独立尺寸 default/small/mini/large；焦点恢复沿用原生行为，width 可明确覆盖尺寸宽度。这组尺寸是浮层宽度，不是控件四档密度。beforeClose(done) 可拦截关闭按钮/遮罩；自定义底部按钮自行决定何时关闭。open/opened 与 close/closed 分别对应开始和动画完成。公开 handleClose 可走关闭流程，resetPosition 可重置拖动位置；不要写入内部 refs。
组合职责与生命周期
modelValue 控制显隐，open/opened 与 close/closed 分别观察开始和过渡完成。beforeClose 只拦截组件的关闭入口；业务直接修改 modelValue 时自己执行校验。header 可获得 close/titleId/titleClass，footer 承担业务操作，title 与 icon 为 ASAM 扩展。handleClose 经过关闭守卫；visible/dialogContentRef 为实时句柄，resetPosition 用于拖动后复位。嵌套层使用独立状态，并按 appendToBody/appendTo 决定挂载容器；destroyOnClose 销毁内容，重新打开会创建新的内容节点。fullscreen、alignCenter、modalPenetrable 与 transition 可独立组合。size 的 default/small/mini/large 是弹层宽度别名，width 显式值优先，和四档控件密度分别配置。
关联组件
参数与事件补充说明
参数与事件说明
showClose
必填：否；声明来源：ASAM 声明。
showClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
modal
必填：否；声明来源：ASAM 声明。
modal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
lockScroll
必填：否；声明来源：ASAM 声明。
lockScroll 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
closeOnPressEscape
必填：否；声明来源：ASAM 声明。
closeOnPressEscape 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
closeOnClickModal
必填：否；声明来源：ASAM 声明。
closeOnClickModal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "default" / "small" / "mini"
icon
必填：否；声明来源：ASAM 声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<Component | undefined>, (...args: never[]) => unknown>>[1]): any
icon.__isFragment:undefined— 依赖声明icon.__isTeleport:undefined— 依赖声明icon.__isSuspense:undefined— 依赖声明
zIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
appendTo
必填：否；声明来源：上游声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：body（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'body'（2.14.7；源码事实，未作为 ASAM 运行实测）
transition
必填：否；声明来源：上游声明。
transition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
transition.name:string | undefined— 依赖声明transition.type:PublicMember<NonNullable<AsamDialogTransition>, "type">— 依赖声明枚举：
"transition"/"animation"transition.css:boolean | undefined— 依赖声明枚举：
false/truetransition.duration:number | { enter: number; leave: number; } | undefined— 依赖声明transition.duration.enter:number— 依赖声明transition.duration.leave:number— 依赖声明
transition.enterFromClass:string | undefined— 依赖声明transition.enterActiveClass:string | undefined— 依赖声明transition.enterToClass:string | undefined— 依赖声明transition.appearFromClass:string | undefined— 依赖声明transition.appearActiveClass:string | undefined— 依赖声明transition.appearToClass:string | undefined— 依赖声明transition.leaveFromClass:string | undefined— 依赖声明transition.leaveActiveClass:string | undefined— 依赖声明transition.leaveToClass:string | undefined— 依赖声明transition.mode:"default" | "in-out" | "out-in" | undefined— 依赖声明枚举：
"default"/"in-out"/"out-in"transition.appear:boolean | undefined— 依赖声明枚举：
false/truetransition.persisted:boolean | undefined— 依赖声明枚举：
false/truetransition.onBeforeEnter:PublicMember<NonNullable<AsamDialogTransition>, "onBeforeEnter">— 依赖声明事件参数：
(el: Element): voidtransition.onEnter:PublicMember<NonNullable<AsamDialogTransition>, "onEnter">— 依赖声明事件参数：
(el: Element, done: () => void): voidtransition.onAfterEnter:PublicMember<NonNullable<AsamDialogTransition>, "onAfterEnter">— 依赖声明事件参数：
(el: Element): voidtransition.onEnterCancelled:PublicMember<NonNullable<AsamDialogTransition>, "onEnterCancelled">— 依赖声明事件参数：
(el: Element): voidtransition.onBeforeLeave:PublicMember<NonNullable<AsamDialogTransition>, "onBeforeLeave">— 依赖声明事件参数：
(el: Element): voidtransition.onLeave:PublicMember<NonNullable<AsamDialogTransition>, "onLeave">— 依赖声明事件参数：
(el: Element, done: () => void): voidtransition.onAfterLeave:PublicMember<NonNullable<AsamDialogTransition>, "onAfterLeave">— 依赖声明事件参数：
(el: Element): voidtransition.onLeaveCancelled:PublicMember<NonNullable<AsamDialogTransition>, "onLeaveCancelled">— 依赖声明事件参数：
(el: Element): voidtransition.onBeforeAppear:PublicMember<NonNullable<AsamDialogTransition>, "onBeforeAppear">— 依赖声明事件参数：
(el: Element): voidtransition.onAppear:PublicMember<NonNullable<AsamDialogTransition>, "onAppear">— 依赖声明事件参数：
(el: Element, done: () => void): voidtransition.onAfterAppear:PublicMember<NonNullable<AsamDialogTransition>, "onAfterAppear">— 依赖声明事件参数：
(el: Element): voidtransition.onAppearCancelled:PublicMember<NonNullable<AsamDialogTransition>, "onAppearCancelled">— 依赖声明事件参数：
(el: Element): void
默认值与来源
未知 / 未声明固定上游文档默认：dialog-fade（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
title
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
width
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
top
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
center
必填：否；声明来源：上游声明。
center 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
modelValue
必填：否；声明来源：上游声明。
modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
alignCenter
必填：否；声明来源：上游声明。
alignCenter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
headerClass
必填：否；声明来源：上游声明。
headerClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
draggable
必填：否；声明来源：上游声明。
draggable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
bodyClass
必填：否；声明来源：上游声明。
bodyClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
footerClass
必填：否；声明来源：上游声明。
footerClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
appendToBody
必填：否；声明来源：上游声明。
appendToBody 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
beforeClose
必填：否；声明来源：上游声明。
beforeClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(done: Parameters<Extract<NonNullable<(AsamDialogProps)["beforeClose"]>, (...args: never[]) => unknown>>[0]): void
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
destroyOnClose
必填：否；声明来源：上游声明。
destroyOnClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
modalPenetrable
必填：否；声明来源：上游声明。
modalPenetrable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
openDelay
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
closeDelay
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
modalClass
必填：否；声明来源：上游声明。
modalClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
trapFocus
必填：否；声明来源：上游声明。
trapFocus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）headerAriaLevel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：2（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'2'（2.14.7；源码事实，未作为 ASAM 运行实测）
closeIcon
必填：否；声明来源：上游声明。
closeIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamDialogProps)["closeIcon"]>, (...args: never[]) => unknown>>[1]): any
closeIcon.__isFragment:undefined— 依赖声明closeIcon.__isTeleport:undefined— 依赖声明closeIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
overflow
必填：否；声明来源：上游声明。
overflow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
fullscreen
必填：否；声明来源：上游声明。
fullscreen 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
ariaLevel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：'2'（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamDialogProps 公开类型视图
ts
import type { Component, Attrs } from 'vue';
import type { AsamDialogProps, AsamDialogSize, AsamDialogExpose, AsamDialogTransition } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamDialogProps
type PublicContract = {
"showClose"?: boolean | undefined;
"modal"?: boolean | undefined;
"lockScroll"?: boolean | undefined;
"closeOnPressEscape"?: boolean | undefined;
"closeOnClickModal"?: boolean | undefined;
"size"?: AsamDialogSize | undefined;
"icon"?: Component | undefined;
"zIndex"?: number | undefined;
"appendTo"?: string | HTMLElement | undefined;
"transition"?: AsamDialogTransition;
"title"?: string | undefined;
"width"?: string | number | undefined;
"top"?: string | undefined;
"center"?: boolean | undefined;
"modelValue"?: boolean | undefined;
"alignCenter"?: boolean | undefined;
"headerClass"?: AsamDialogProps["headerClass"];
"draggable"?: boolean | undefined;
"bodyClass"?: AsamDialogProps["headerClass"];
"footerClass"?: AsamDialogProps["headerClass"];
"appendToBody"?: boolean | undefined;
"beforeClose"?: (AsamDialogProps)["beforeClose"];
"destroyOnClose"?: boolean | undefined;
"modalPenetrable"?: boolean | undefined;
"openDelay"?: number | undefined;
"closeDelay"?: number | undefined;
"modalClass"?: AsamDialogProps["headerClass"];
"trapFocus"?: boolean | undefined;
"headerAriaLevel"?: string | undefined;
"closeIcon"?: (AsamDialogProps)["closeIcon"];
"overflow"?: boolean | undefined;
"fullscreen"?: boolean | undefined;
"ariaLevel"?: string | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
open
必填：是；声明来源：ASAM 声明。
opened
必填：是；声明来源：ASAM 声明。
close
必填：是；声明来源：ASAM 声明。
closed
必填：是；声明来源：ASAM 声明。
openAutoFocus
必填：是；声明来源：ASAM 声明。
closeAutoFocus
必填：是；声明来源：ASAM 声明。
AsamDialogEmits 公开类型视图
ts
import type { AsamDialogEmits } from '@asam-ui/ui';
// AsamDialogEmits
type PublicContract = {
"update:modelValue": [value: boolean];
"open": (AsamDialogEmits)["open"];
"opened": (AsamDialogEmits)["opened"];
"close": (AsamDialogEmits)["close"];
"closed": (AsamDialogEmits)["closed"];
"openAutoFocus": (AsamDialogEmits)["openAutoFocus"];
"closeAutoFocus": (AsamDialogEmits)["closeAutoFocus"];
};参数与事件说明
header
必填：否；声明来源：ASAM 声明。
header 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { close: () => void; titleId: string; titleClass: string; }): unknown
title
必填：否；声明来源：ASAM 声明。
title 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
icon
必填：否；声明来源：ASAM 声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
footer
必填：否；声明来源：ASAM 声明。
footer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamDialogSlots 公开类型视图
ts
import type { AsamDialogSlots } from '@asam-ui/ui';
// AsamDialogSlots
type PublicContract = {
"header"?: ((props: { close: () => void; titleId: string; titleClass: string; }) => unknown) | undefined;
"title"?: (() => unknown) | undefined;
"icon"?: (() => unknown) | undefined;
"default"?: (() => unknown) | undefined;
"footer"?: (() => unknown) | undefined;
};参数与事件说明
visible
必填：是；声明来源：上游声明。
visible 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
dialogContentRef
必填：是；声明来源：上游声明。
resetPosition
必填：是；声明来源：上游声明。
resetPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
handleClose
必填：是；声明来源：上游声明。
handleClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamDialogExpose 公开类型视图
ts
import type { AsamDialogExpose } from '@asam-ui/ui';
// AsamDialogExpose
type PublicContract = {
"visible": boolean;
"dialogContentRef": any;
"resetPosition": () => void;
"handleClose": () => void;
};浮层使用独立尺寸，与控件密度分别配置。
组合契约按分支生效；请同时查看公开类型。
AsamDialogSize 公开类型视图
ts
import type { AsamDialogSize } from '@asam-ui/ui';
// AsamDialogSize
type PublicContract = AsamDialogSize;组合契约按分支生效；请同时查看公开类型。
参数与事件说明
name
必填：按分支；声明来源：依赖声明。
type
必填：按分支；声明来源：依赖声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
枚举："transition" / "animation"
css
必填：按分支；声明来源：依赖声明。
css 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
枚举：false / true
duration
必填：按分支；声明来源：依赖声明。
duration 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
duration.enter:number— 依赖声明duration.leave:number— 依赖声明
enterFromClass
必填：按分支；声明来源：依赖声明。
enterActiveClass
必填：按分支；声明来源：依赖声明。
enterToClass
必填：按分支；声明来源：依赖声明。
appearFromClass
必填：按分支；声明来源：依赖声明。
appearActiveClass
必填：按分支；声明来源：依赖声明。
appearToClass
必填：按分支；声明来源：依赖声明。
leaveFromClass
必填：按分支；声明来源：依赖声明。
leaveActiveClass
必填：按分支；声明来源：依赖声明。
leaveToClass
必填：按分支；声明来源：依赖声明。
mode
必填：按分支；声明来源：依赖声明。
mode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
枚举："default" / "in-out" / "out-in"
appear
必填：按分支；声明来源：依赖声明。
appear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
枚举：false / true
persisted
必填：按分支；声明来源：依赖声明。
persisted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
枚举：false / true
onBeforeEnter
必填：按分支；声明来源：依赖声明。
onBeforeEnter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element): void
onEnter
必填：按分支；声明来源：依赖声明。
onEnter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element, done: () => void): void
onAfterEnter
必填：按分支；声明来源：依赖声明。
onAfterEnter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element): void
onEnterCancelled
必填：按分支；声明来源：依赖声明。
onEnterCancelled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element): void
onBeforeLeave
必填：按分支；声明来源：依赖声明。
onBeforeLeave 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element): void
onLeave
必填：按分支；声明来源：依赖声明。
onLeave 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element, done: () => void): void
onAfterLeave
必填：按分支；声明来源：依赖声明。
onAfterLeave 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element): void
onLeaveCancelled
必填：按分支；声明来源：依赖声明。
onLeaveCancelled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element): void
onBeforeAppear
必填：按分支；声明来源：依赖声明。
onBeforeAppear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element): void
onAppear
必填：按分支；声明来源：依赖声明。
onAppear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element, done: () => void): void
onAfterAppear
必填：按分支；声明来源：依赖声明。
onAfterAppear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element): void
onAppearCancelled
必填：按分支；声明来源：依赖声明。
onAppearCancelled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(el: Element): void
AsamDialogTransition 公开类型视图
ts
import type { AsamDialogTransition, AsamDialogProps, AsamDialogSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamDialogTransition
type PublicContract = AsamDialogTransition;