使用场景
从页面边缘展开辅助流程，保留主页面上下文。
方向与抽屉操作
抽屉向左展开，底部操作完成后关闭。标题图标使用 ASAM 图标。
方向与抽屉操作
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamButton type="default" native-type="button" @click="open = true">打开抽屉</AsamButton>
<AsamDrawer
v-model="open"
title="记录详情"
direction="rtl"
size="small"
:icon="InfoFilled"
:close-on-click-modal="false"
>
<p class="example-paragraph">辅助内容保持在当前页面上下文中。</p>
<template #footer>
<AsamButton type="default" native-type="button" @click="open = false">完成</AsamButton>
</template>
</AsamDrawer>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDrawerBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamDrawer } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const open = ref(false);
</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>
<AsamDrawer
v-model="open"
title="记录详情"
direction="rtl"
size="small"
:icon="InfoFilled"
:close-on-click-modal="false"
>
<p class="example-paragraph">辅助内容保持在当前页面上下文中。</p>
<template #footer>
<AsamButton type="default" native-type="button" @click="open = false">完成</AsamButton>
</template>
</AsamDrawer>
</template>
<script setup>
defineOptions({ name: 'AsamDrawerBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamDrawer } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const open = ref(false);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>调整边缘尺寸
拖动抽屉边缘查看 resize 回调；显式 CSS 尺寸用于较窄页面。
调整边缘尺寸
vue
<template>
<AsamButton type="default" native-type="button" @click="open = true">打开可调整抽屉</AsamButton>
<AsamDrawer
v-model="open"
v-bind="{ title: '可调整宽度', size: '60%', resizable: true }"
@resize="track"
>
<p class="example-paragraph" role="status">当前拖动尺寸 {{ size }} px</p>
</AsamDrawer>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDrawerResizeDemo' });
import { ref } from 'vue';
import { AsamButton, AsamDrawer } from '@asam-ui/ui';
const open = ref(false);
const size = ref(0);
const track = (_event: MouseEvent, value: number) => {
size.value = Math.round(value);
};
</script>
<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>
<AsamDrawer
v-model="open"
v-bind="{ title: '可调整宽度', size: '60%', resizable: true }"
@resize="track"
>
<p class="example-paragraph" role="status">当前拖动尺寸 {{ size }} px</p>
</AsamDrawer>
</template>
<script setup>
defineOptions({ name: 'AsamDrawerResizeDemo' });
import { ref } from 'vue';
import { AsamButton, AsamDrawer } from '@asam-ui/ui';
const open = ref(false);
const size = ref(0);
const track = (_event, value) => {
size.value = Math.round(value);
};
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
v-model 控制显隐，direction 决定展开方向，size 是本入口的浮层尺寸；支持 default/small/large/full 别名，也可传百分比、CSS 长度或数值。 完整说明。
完整用法
以下用法使用本库公开入口。每个示例提供完整 TS/JS SFC，参数、事件、插槽和实例类型见本页 API。服务实例由创建方负责关闭；HTML 内容仅用于调用方已知的可信字符串。
显隐与关闭守卫
显隐与关闭守卫
vue
<template>
<label
>展开方向
<AsamSelect :model-value="direction" @change="changeDirection">
<AsamOption value="ltr" :label="'从左展开'">从左展开</AsamOption>
<AsamOption value="rtl" :label="'从右展开'">从右展开</AsamOption>
<AsamOption value="ttb" :label="'从上展开'">从上展开</AsamOption>
<AsamOption value="btt" :label="'从下展开'">从下展开</AsamOption>
</AsamSelect></label
>
<AsamButton type="default" style="margin-left: 16px" @click="drawer = true"> 打开 </AsamButton>
<AsamButton type="default" style="margin-left: 16px" @click="drawer2 = true">
带底部区域
</AsamButton>
<AsamDrawer
v-model="drawer"
title="标题示例"
:direction="direction"
:before-close="handleClose"
>
<span>你好！</span>
</AsamDrawer>
<AsamDrawer v-model="drawer2" :direction="direction">
<template #header>
<h4>通过插槽设置标题</h4>
</template>
<template #default>
<div>
<AsamRadioItem v-model="radio1" value="Option 1"> 选项 1 </AsamRadioItem>
<AsamRadioItem v-model="radio1" value="Option 2"> 选项 2 </AsamRadioItem>
</div>
</template>
<template #footer>
<div style="flex: auto">
<AsamButton type="default" @click="cancelClick">取消</AsamButton>
<AsamButton type="default" @click="confirmClick">确认</AsamButton>
</div>
</template>
</AsamDrawer>
</template>
<script lang="ts" setup>
import {
AsamSelect,
AsamOption,
AsamRadioItem,
AsamButton,
AsamDrawer,
AsamMessageBox,
type AsamDrawerProps as DrawerProps
} from '@asam-ui/ui';
import { ref } from 'vue';
const drawer = ref(false);
const drawer2 = ref(false);
const direction = ref<DrawerProps['direction']>('rtl');
const radio1 = ref('Option 1');
const handleClose = (done: () => void) => {
AsamMessageBox.confirm('确定关闭当前窗口吗？')
.then(() => {
done();
})
.catch(() => {
// catch error
});
};
function cancelClick() {
drawer2.value = false;
}
function confirmClick() {
AsamMessageBox.confirm(`确认选择${radio1.value === 'Option 1' ? '选项 1' : '选项 2'}吗？`)
.then(() => {
drawer2.value = false;
})
.catch(() => {
// catch error
});
}
const changeDirection = (value: unknown) => {
if (value === 'ltr' || value === 'rtl' || value === 'ttb' || value === 'btt') {
direction.value = value;
}
};
</script>vue
<template>
<label
>展开方向
<AsamSelect :model-value="direction" @change="changeDirection">
<AsamOption value="ltr" :label="'从左展开'">从左展开</AsamOption>
<AsamOption value="rtl" :label="'从右展开'">从右展开</AsamOption>
<AsamOption value="ttb" :label="'从上展开'">从上展开</AsamOption>
<AsamOption value="btt" :label="'从下展开'">从下展开</AsamOption>
</AsamSelect></label
>
<AsamButton type="default" style="margin-left: 16px" @click="drawer = true"> 打开 </AsamButton>
<AsamButton type="default" style="margin-left: 16px" @click="drawer2 = true">
带底部区域
</AsamButton>
<AsamDrawer
v-model="drawer"
title="标题示例"
:direction="direction"
:before-close="handleClose"
>
<span>你好！</span>
</AsamDrawer>
<AsamDrawer v-model="drawer2" :direction="direction">
<template #header>
<h4>通过插槽设置标题</h4>
</template>
<template #default>
<div>
<AsamRadioItem v-model="radio1" value="Option 1"> 选项 1 </AsamRadioItem>
<AsamRadioItem v-model="radio1" value="Option 2"> 选项 2 </AsamRadioItem>
</div>
</template>
<template #footer>
<div style="flex: auto">
<AsamButton type="default" @click="cancelClick">取消</AsamButton>
<AsamButton type="default" @click="confirmClick">确认</AsamButton>
</div>
</template>
</AsamDrawer>
</template>
<script setup>
import {
AsamSelect,
AsamOption,
AsamRadioItem,
AsamButton,
AsamDrawer,
AsamMessageBox
} from '@asam-ui/ui';
import { ref } from 'vue';
const drawer = ref(false);
const drawer2 = ref(false);
const direction = ref('rtl');
const radio1 = ref('Option 1');
const handleClose = (done) => {
AsamMessageBox.confirm('确定关闭当前窗口吗？')
.then(() => {
done();
})
.catch(() => {
// catch error
});
};
function cancelClick() {
drawer2.value = false;
}
function confirmClick() {
AsamMessageBox.confirm(`确认选择${radio1.value === 'Option 1' ? '选项 1' : '选项 2'}吗？`)
.then(() => {
drawer2.value = false;
})
.catch(() => {
// catch error
});
}
const changeDirection = (value) => {
if (value === 'ltr' || value === 'rtl' || value === 'ttb' || value === 'btt') {
direction.value = value;
}
};
</script>无标题
无标题
vue
<template>
<AsamButton type="default" @click="drawer = true"> 打开 </AsamButton>
<AsamDrawer v-model="drawer" title="标题示例" :with-header="false">
<span>你好！</span>
</AsamDrawer>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDrawer } from '@asam-ui/ui';
import { ref } from 'vue';
const drawer = ref(false);
</script>vue
<template>
<AsamButton type="default" @click="drawer = true"> 打开 </AsamButton>
<AsamDrawer v-model="drawer" title="标题示例" :with-header="false">
<span>你好！</span>
</AsamDrawer>
</template>
<script setup>
import { AsamButton, AsamDrawer } from '@asam-ui/ui';
import { ref } from 'vue';
const drawer = ref(false);
</script>表单与表格内容
表单与表格内容
vue
<template>
<AsamButton type="default" text @click="table = true"> 打开含嵌套表格的抽屉 </AsamButton>
<AsamButton type="default" text @click="dialog = true"> 打开含嵌套表单的抽屉 </AsamButton>
<AsamDrawer v-model="table" title="内部包含嵌套表格。" direction="rtl" size="50%">
<AsamTable :data="gridData">
<AsamTableColumn property="date" label="日期" width="150" />
<AsamTableColumn property="name" label="姓名" width="200" />
<AsamTableColumn property="address" label="地址" />
</AsamTable>
</AsamDrawer>
<AsamDrawer
v-model="dialog"
title="内部包含嵌套表单。"
:before-close="handleClose"
direction="ltr"
class="demo-drawer"
>
<div class="demo-drawer__content">
<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>
<div class="demo-drawer__footer">
<AsamButton type="default" @click="cancelForm">取消</AsamButton>
<AsamButton type="default" :loading="loading" @click="onClick">
{{ loading ? 'Submitting ...' : 'Submit' }}
</AsamButton>
</div>
</div>
</AsamDrawer>
</template>
<script lang="ts" setup>
import {
AsamBaseForm,
AsamButton,
AsamDrawer,
AsamFormItem,
AsamInput,
AsamMessageBox,
AsamOption,
AsamSelect,
AsamTable,
AsamTableColumn
} from '@asam-ui/ui';
import { reactive, ref } from 'vue';
const formLabelWidth = '80px';
let timer: ReturnType<typeof setTimeout> | undefined;
const table = ref(false);
const dialog = ref(false);
const loading = ref(false);
const form = reactive({
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
});
const gridData = [
{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City'
},
{
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City'
},
{
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City'
},
{
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City'
}
];
const onClick = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
dialog.value = false;
}, 400);
};
const handleClose = (done: () => void) => {
if (loading.value) {
return;
}
AsamMessageBox.confirm('确定提交吗？')
.then(() => {
loading.value = true;
timer = setTimeout(() => {
done();
// 动画关闭需要一定的时间
setTimeout(() => {
loading.value = false;
}, 400);
}, 2000);
})
.catch(() => {
// catch error
});
};
const cancelForm = () => {
loading.value = false;
dialog.value = false;
clearTimeout(timer);
};
</script>vue
<template>
<AsamButton type="default" text @click="table = true"> 打开含嵌套表格的抽屉 </AsamButton>
<AsamButton type="default" text @click="dialog = true"> 打开含嵌套表单的抽屉 </AsamButton>
<AsamDrawer v-model="table" title="内部包含嵌套表格。" direction="rtl" size="50%">
<AsamTable :data="gridData">
<AsamTableColumn property="date" label="日期" width="150" />
<AsamTableColumn property="name" label="姓名" width="200" />
<AsamTableColumn property="address" label="地址" />
</AsamTable>
</AsamDrawer>
<AsamDrawer
v-model="dialog"
title="内部包含嵌套表单。"
:before-close="handleClose"
direction="ltr"
class="demo-drawer"
>
<div class="demo-drawer__content">
<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>
<div class="demo-drawer__footer">
<AsamButton type="default" @click="cancelForm">取消</AsamButton>
<AsamButton type="default" :loading="loading" @click="onClick">
{{ loading ? 'Submitting ...' : 'Submit' }}
</AsamButton>
</div>
</div>
</AsamDrawer>
</template>
<script setup>
import {
AsamBaseForm,
AsamButton,
AsamDrawer,
AsamFormItem,
AsamInput,
AsamMessageBox,
AsamOption,
AsamSelect,
AsamTable,
AsamTableColumn
} from '@asam-ui/ui';
import { reactive, ref } from 'vue';
const formLabelWidth = '80px';
let timer;
const table = ref(false);
const dialog = ref(false);
const loading = ref(false);
const form = reactive({
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
});
const gridData = [
{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City'
},
{
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City'
},
{
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City'
},
{
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City'
}
];
const onClick = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
dialog.value = false;
}, 400);
};
const handleClose = (done) => {
if (loading.value) {
return;
}
AsamMessageBox.confirm('确定提交吗？')
.then(() => {
loading.value = true;
timer = setTimeout(() => {
done();
// 动画关闭需要一定的时间
setTimeout(() => {
loading.value = false;
}, 400);
}, 2000);
})
.catch(() => {
// catch error
});
};
const cancelForm = () => {
loading.value = false;
dialog.value = false;
clearTimeout(timer);
};
</script>标题插槽
标题插槽
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamButton type="default" @click="visible = true"> 打开自定义头部的抽屉 </AsamButton>
<AsamDrawer v-model="visible" :show-close="false">
<template #header="{ close, titleId, titleClass }">
<h4 :id="titleId" :class="titleClass">自定义头部示例</h4>
<AsamButton type="default" @click="close">
<AsamIcon class="el-icon--left"><CircleCloseFilled /></AsamIcon>
关闭
</AsamButton>
</template>
这是抽屉内容。
</AsamDrawer>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDrawer, AsamIcon } from '@asam-ui/ui';
import { ref } from 'vue';
import { CircleCloseFilled } from '@asam-ui/icons-vue';
const visible = ref(false);
</script>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamButton type="default" @click="visible = true"> 打开自定义头部的抽屉 </AsamButton>
<AsamDrawer v-model="visible" :show-close="false">
<template #header="{ close, titleId, titleClass }">
<h4 :id="titleId" :class="titleClass">自定义头部示例</h4>
<AsamButton type="default" @click="close">
<AsamIcon class="el-icon--left"><CircleCloseFilled /></AsamIcon>
关闭
</AsamButton>
</template>
这是抽屉内容。
</AsamDrawer>
</template>
<script setup>
import { AsamButton, AsamDrawer, AsamIcon } from '@asam-ui/ui';
import { ref } from 'vue';
import { CircleCloseFilled } from '@asam-ui/icons-vue';
const visible = ref(false);
</script>拖动边缘与尺寸事件
拖动边缘与尺寸事件
vue
<template>
<label
>展开方向
<AsamSelect :model-value="direction" @change="changeDirection">
<AsamOption value="ltr" :label="'从左展开'">从左展开</AsamOption>
<AsamOption value="rtl" :label="'从右展开'">从右展开</AsamOption>
<AsamOption value="ttb" :label="'从上展开'">从上展开</AsamOption>
<AsamOption value="btt" :label="'从下展开'">从下展开</AsamOption>
</AsamSelect></label
>
<AsamDrawer v-model="drawer" :direction="direction" resizable> 这是抽屉内容。 </AsamDrawer>
</template>
<script lang="ts" setup>
import {
AsamSelect,
AsamOption,
AsamDrawer,
type AsamDrawerProps as DrawerProps
} from '@asam-ui/ui';
import { ref } from 'vue';
const direction = ref<DrawerProps['direction']>();
const drawer = ref(false);
const changeDirection = (value: unknown) => {
if (value === 'ltr' || value === 'rtl' || value === 'ttb' || value === 'btt') {
direction.value = value;
drawer.value = true;
}
};
</script>vue
<template>
<label
>展开方向
<AsamSelect :model-value="direction" @change="changeDirection">
<AsamOption value="ltr" :label="'从左展开'">从左展开</AsamOption>
<AsamOption value="rtl" :label="'从右展开'">从右展开</AsamOption>
<AsamOption value="ttb" :label="'从上展开'">从上展开</AsamOption>
<AsamOption value="btt" :label="'从下展开'">从下展开</AsamOption>
</AsamSelect></label
>
<AsamDrawer v-model="drawer" :direction="direction" resizable> 这是抽屉内容。 </AsamDrawer>
</template>
<script setup>
import { AsamSelect, AsamOption, AsamDrawer } from '@asam-ui/ui';
import { ref } from 'vue';
const direction = ref();
const drawer = ref(false);
const changeDirection = (value) => {
if (value === 'ltr' || value === 'rtl' || value === 'ttb' || value === 'btt') {
direction.value = value;
drawer.value = true;
}
};
</script>嵌套抽屉
嵌套抽屉
vue
<template>
<AsamButton type="default" @click="drawer = true"> 打开 </AsamButton>
<AsamDrawer v-model="drawer" title="外层抽屉" size="50%">
<div>
<AsamButton type="default" @click="innerDrawer = true">点击按钮</AsamButton>
<AsamDrawer
v-model="innerDrawer"
title="内层抽屉"
:append-to-body="true"
:before-close="handleClose"
>
<p class="example-paragraph">_(:зゝ∠)_</p>
</AsamDrawer>
</div>
</AsamDrawer>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDrawer, AsamMessageBox } from '@asam-ui/ui';
import { ref } from 'vue';
const drawer = ref(false);
const innerDrawer = ref(false);
const handleClose = (done: () => void) => {
AsamMessageBox.confirm('仍有未保存的数据，确定继续吗？')
.then(() => {
done();
})
.catch(() => {
// catch error
});
};
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<AsamButton type="default" @click="drawer = true"> 打开 </AsamButton>
<AsamDrawer v-model="drawer" title="外层抽屉" size="50%">
<div>
<AsamButton type="default" @click="innerDrawer = true">点击按钮</AsamButton>
<AsamDrawer
v-model="innerDrawer"
title="内层抽屉"
:append-to-body="true"
:before-close="handleClose"
>
<p class="example-paragraph">_(:зゝ∠)_</p>
</AsamDrawer>
</div>
</AsamDrawer>
</template>
<script setup>
import { AsamButton, AsamDrawer, AsamMessageBox } from '@asam-ui/ui';
import { ref } from 'vue';
const drawer = ref(false);
const innerDrawer = ref(false);
const handleClose = (done) => {
AsamMessageBox.confirm('仍有未保存的数据，确定继续吗？')
.then(() => {
done();
})
.catch(() => {
// catch error
});
};
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>遮罩配置
遮罩配置
vue
<template>
<AsamButton type="default" @click="drawerVisible = true"> 打开模态抽屉 </AsamButton>
<AsamDrawer v-model="drawerVisible" :modal="false" modal-penetrable>
<span>模态抽屉</span>
<template #footer>
<div class="drawer-footer">
<AsamButton type="default" @click="drawerVisible = false">取消</AsamButton>
<AsamButton type="default" @click="drawerVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDrawer>
</template>
<script lang="ts" setup>
import { AsamButton, AsamDrawer } from '@asam-ui/ui';
import { ref } from 'vue';
const drawerVisible = ref(false);
</script>vue
<template>
<AsamButton type="default" @click="drawerVisible = true"> 打开模态抽屉 </AsamButton>
<AsamDrawer v-model="drawerVisible" :modal="false" modal-penetrable>
<span>模态抽屉</span>
<template #footer>
<div class="drawer-footer">
<AsamButton type="default" @click="drawerVisible = false">取消</AsamButton>
<AsamButton type="default" @click="drawerVisible = false"> 确认 </AsamButton>
</div>
</template>
</AsamDrawer>
</template>
<script setup>
import { AsamButton, AsamDrawer } from '@asam-ui/ui';
import { ref } from 'vue';
const drawerVisible = ref(false);
</script>组合职责与生命周期
direction 支持 ltr/rtl/ttb/btt；size 接受实际 CSS 尺寸或 ASAM default/small/large/full 宽度别名，与控件密度分别配置。 完整说明。
原生显隐与焦点
省略 appendToBody 等交互参数使用 原生公开组件 默认值；显式 undefined、null、false 原样传递。打开、关闭、自动聚焦及过渡事件使用原生顺序，关闭守卫、Esc 和焦点回退交由原生处理。ASAM 仅保留标题、图标与尺寸外观，公开实例方法保留原生 this、返回值及实时引用。
自定义 header 直接接收原生 close/titleId/titleClass，并由调用方声明标题节点；组件不额外包裹 heading 或重复设置 titleId。未提供 header 时，默认标题保留 ASAM 的标题、图标与外观。
参数省略时的默认值
withHeader、modalFade、closeOnClickModal、closeOnPressEscape、lockScroll、modal、showClose 省略时均由原生组件采用 true。 完整说明。
局部与全局挂载
局部模式将遮罩限制在演示区域；全局模式使用默认视口范围。 开关显示当前模式，两个模式均可操作；关闭后可以再次切换。
局部与全局挂载
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>
<AsamDrawer
v-model="open"
title="记录详情"
direction="rtl"
size="small"
:icon="InfoFilled"
:close-on-click-modal="false"
: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>
</AsamDrawer>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDrawerBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamDrawer } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const open = ref(false);
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>
<AsamDrawer
v-model="open"
title="记录详情"
direction="rtl"
size="small"
:icon="InfoFilled"
:close-on-click-modal="false"
: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>
</AsamDrawer>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDrawerBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamDrawer } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const open = ref(false);
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
属性 AsamDrawerProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
showClose | 省略时采用透传的原生默认值。 | boolean | undefined | true |
modal | 省略时采用透传的原生默认值。 | boolean | undefined | true |
lockScroll | 省略时采用透传的原生默认值。 | boolean | undefined | true |
closeOnPressEscape | 省略时采用透传的原生默认值。 | boolean | undefined | true |
closeOnClickModal | 省略时采用透传的原生默认值。 | boolean | undefined | true |
modalFade | 省略时采用透传的原生默认值。 | boolean | undefined | true |
withHeader | 省略时采用透传的原生默认值。 | boolean | undefined | true |
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 | — |
size | 抽屉尺寸；数字按像素处理，字符串可使用 x% 百分比，其他情况按数字尺寸解析。 | string | number | undefined | — |
top | dialog CSS 中的 margin-top 值，默认为 15vh | string | undefined | — |
center | 是否让 Dialog 的 header 和 footer 部分居中排列 | boolean | undefined | false |
direction | 设置抽屉展开方向。 | enum"ltr" | "rtl" | "ttb" | "btt"完整类型："ltr" | "rtl" | "ttb" | "btt" | undefined | — |
modelValue | 是否显示 Dialog | boolean | undefined | false |
resizable | 是否启用抽屉大小调整。 | boolean | undefined | false |
alignCenter | 是否水平垂直对齐对话框 | boolean | undefined | false |
headerClass | header 部分的自定义 class 名 | AsamDrawerProps["headerClass"] | false |
draggable | 为 Dialog 启用可拖拽功能 | boolean | undefined | false |
bodyClass | body 部分的自定义 class 名 | AsamDrawerProps["headerClass"] | false |
footerClass | footer 部分的自定义 class 名 | AsamDrawerProps["headerClass"] | false |
appendToBody | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | undefined | false |
beforeClose | 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. | (AsamDrawerProps)["beforeClose"] | — |
destroyOnClose | 当关闭 Dialog 时，销毁其中的元素 | boolean | undefined | false |
modalPenetrable | 遮罩是否允许点击穿透。 | boolean | undefined | false |
openDelay | dialog 打开的延时时间，单位毫秒 | number | undefined | — |
closeDelay | dialog 关闭的延时时间，单位毫秒 | number | undefined | — |
modalClass | 遮罩的自定义类名 | AsamDrawerProps["headerClass"] | false |
trapFocus | 将焦点限制在对话框内。 | boolean | undefined | false |
headerAriaLevel | 帮助屏幕阅读器等辅助技术识别内容层级。 | string | undefined | — |
closeIcon | 自定义关闭图标，默认Close | (AsamDrawerProps)["closeIcon"] | — |
overflow | 拖动范围可以超出可视区 | boolean | undefined | false |
fullscreen | 是否为全屏 Dialog | boolean | undefined | false |
ariaLevel | header 的 aria-level 属性 | string | undefined | — |
事件 AsamDrawerEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: boolean] | — |
open | — | (AsamDrawerEmits)["open"] | — |
opened | — | (AsamDrawerEmits)["opened"] | — |
close | — | (AsamDrawerEmits)["close"] | — |
closed | — | (AsamDrawerEmits)["closed"] | — |
openAutoFocus | — | (AsamDrawerEmits)["openAutoFocus"] | — |
closeAutoFocus | — | (AsamDrawerEmits)["closeAutoFocus"] | — |
resize-start | — | [event: MouseEvent, size: number] | — |
resize | — | [event: MouseEvent, size: number] | — |
resize-end | — | [event: MouseEvent, size: number] | — |
插槽 AsamDrawerSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
header | — | ((props: { close: () => void; titleId: string; titleClass: string; }) => unknown) | undefined | — |
title | — | (() => unknown) | undefined | — |
icon | — | (() => unknown) | undefined | — |
default | — | (() => unknown) | undefined | — |
footer | — | (() => unknown) | undefined | — |
实例方法与状态 AsamDrawerExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
handleClose | — | () => void | — |
类型 AsamDrawerSize
用法与契约补充说明
使用约定
v-model 控制显隐，direction 决定展开方向，size 是本入口的浮层尺寸；支持 default/small/large/full 别名，也可传百分比、CSS 长度或数值。它与控件密度 size 不同，不传入 big/mini 冒充支持。ASAM 提供默认标题 icon，焦点恢复沿用原生行为。resizable 允许边缘拖动，resize-start/resize/resize-end 提供原始事件及尺寸；beforeClose(done) 可拦截关闭。公开 handleClose() 通过同一关闭守卫，完整类型见下方 API。2.14.7 的 afterEnter/afterLeave 是内部动画回调，已移除旧实例声明；调用方通过 opened/closed 事件观察动画结束，不直接触发内部过渡。
组合职责与生命周期
direction 支持 ltr/rtl/ttb/btt；size 接受实际 CSS 尺寸或 ASAM default/small/large/full 宽度别名，与控件密度分别配置。resizable 开启边缘拖动，resize-start/resize/resize-end 保留 MouseEvent 和数字尺寸。header、title、icon、default、footer 分别承载标题与内容。handleClose 是唯一公开关闭方法，经过 beforeClose；过渡完成分别订阅 opened/closed。destroyOnClose、appendToBody、appendTo、lockScroll 和 closeOnPressEscape 按宿主需求组合。外部直接修改 modelValue 由业务负责校验。卸载时释放遮罩和锁屏，原触发器仍连接时恢复焦点。
参数省略时的默认值
withHeader、modalFade、closeOnClickModal、closeOnPressEscape、lockScroll、modal、showClose 省略时均由原生组件采用 true。显式提供 false、undefined 或后续移除参数仍按原生契约透传；API 表的默认值描述省略参数，不是包装层的内部布尔转换结果。
关联组件
参数与事件补充说明
参数与事件说明
showClose
必填：否；声明来源：ASAM 声明。
showClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）modal
必填：否；声明来源：ASAM 声明。
modal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）lockScroll
必填：否；声明来源：ASAM 声明。
lockScroll 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）closeOnPressEscape
必填：否；声明来源：ASAM 声明。
closeOnPressEscape 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）closeOnClickModal
必填：否；声明来源：ASAM 声明。
closeOnClickModal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）modalFade
必填：否；声明来源：ASAM 声明。
modalFade 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
withHeader
必填：否；声明来源：ASAM 声明。
withHeader 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（声明注释；ASAM 声明）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
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
必填：否；声明来源：上游声明。
appendTo
必填：否；声明来源：上游声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
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
title
必填：否；声明来源：上游声明。
width
必填：否；声明来源：上游声明。
size
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：30%（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'30%'（2.14.7；源码事实，未作为 ASAM 运行实测）
top
必填：否；声明来源：上游声明。
center
必填：否；声明来源：上游声明。
center 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）direction
必填：否；声明来源：上游声明。
direction 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："ltr" / "rtl" / "ttb" / "btt"
默认值与来源
未知 / 未声明固定上游文档默认：rtl（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'rtl'（2.14.7；源码事实，未作为 ASAM 运行实测）
modelValue
必填：否；声明来源：上游声明。
modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）resizable
必填：否；声明来源：上游声明。
resizable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
alignCenter
必填：否；声明来源：上游声明。
alignCenter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）headerClass
必填：否；声明来源：上游声明。
headerClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）draggable
必填：否；声明来源：上游声明。
draggable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）bodyClass
必填：否；声明来源：上游声明。
bodyClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）footerClass
必填：否；声明来源：上游声明。
footerClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）appendToBody
必填：否；声明来源：上游声明。
appendToBody 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）beforeClose
必填：否；声明来源：上游声明。
beforeClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(done: Parameters<Extract<NonNullable<(AsamDrawerProps)["beforeClose"]>, (...args: never[]) => unknown>>[0]): void
destroyOnClose
必填：否；声明来源：上游声明。
destroyOnClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）modalPenetrable
必填：否；声明来源：上游声明。
modalPenetrable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）openDelay
必填：否；声明来源：上游声明。
closeDelay
必填：否；声明来源：上游声明。
modalClass
必填：否；声明来源：上游声明。
modalClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）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<(AsamDrawerProps)["closeIcon"]>, (...args: never[]) => unknown>>[1]): any
closeIcon.__isFragment:undefined— 依赖声明closeIcon.__isTeleport:undefined— 依赖声明closeIcon.__isSuspense:undefined— 依赖声明
overflow
必填：否；声明来源：上游声明。
overflow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）fullscreen
必填：否；声明来源：上游声明。
fullscreen 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）ariaLevel
必填：否；声明来源：上游声明。
AsamDrawerProps 公开类型视图
ts
import type { Component, Attrs } from 'vue';
import type { AsamDrawerProps, AsamDialogTransition, AsamDrawerSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamDrawerProps
type PublicContract = {
"showClose"?: boolean | undefined;
"modal"?: boolean | undefined;
"lockScroll"?: boolean | undefined;
"closeOnPressEscape"?: boolean | undefined;
"closeOnClickModal"?: boolean | undefined;
"modalFade"?: boolean | undefined;
"withHeader"?: boolean | undefined;
"icon"?: Component | undefined;
"zIndex"?: number | undefined;
"appendTo"?: string | HTMLElement | undefined;
"transition"?: AsamDialogTransition;
"title"?: string | undefined;
"width"?: string | number | undefined;
"size"?: string | number | undefined;
"top"?: string | undefined;
"center"?: boolean | undefined;
"direction"?: "ltr" | "rtl" | "ttb" | "btt" | undefined;
"modelValue"?: boolean | undefined;
"resizable"?: boolean | undefined;
"alignCenter"?: boolean | undefined;
"headerClass"?: AsamDrawerProps["headerClass"];
"draggable"?: boolean | undefined;
"bodyClass"?: AsamDrawerProps["headerClass"];
"footerClass"?: AsamDrawerProps["headerClass"];
"appendToBody"?: boolean | undefined;
"beforeClose"?: (AsamDrawerProps)["beforeClose"];
"destroyOnClose"?: boolean | undefined;
"modalPenetrable"?: boolean | undefined;
"openDelay"?: number | undefined;
"closeDelay"?: number | undefined;
"modalClass"?: AsamDrawerProps["headerClass"];
"trapFocus"?: boolean | undefined;
"headerAriaLevel"?: string | undefined;
"closeIcon"?: (AsamDrawerProps)["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 声明。
resize-start
必填：是；声明来源：ASAM 声明。
resize
必填：是；声明来源：ASAM 声明。
resize-end
必填：是；声明来源：ASAM 声明。
AsamDrawerEmits 公开类型视图
ts
import type { AsamDrawerEmits } from '@asam-ui/ui';
// AsamDrawerEmits
type PublicContract = {
"update:modelValue": [value: boolean];
"open": (AsamDrawerEmits)["open"];
"opened": (AsamDrawerEmits)["opened"];
"close": (AsamDrawerEmits)["close"];
"closed": (AsamDrawerEmits)["closed"];
"openAutoFocus": (AsamDrawerEmits)["openAutoFocus"];
"closeAutoFocus": (AsamDrawerEmits)["closeAutoFocus"];
"resize-start": [event: MouseEvent, size: number];
"resize": [event: MouseEvent, size: number];
"resize-end": [event: MouseEvent, size: number];
};参数与事件说明
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
AsamDrawerSlots 公开类型视图
ts
import type { AsamDrawerSlots } from '@asam-ui/ui';
// AsamDrawerSlots
type PublicContract = {
"header"?: ((props: { close: () => void; titleId: string; titleClass: string; }) => unknown) | undefined;
"title"?: (() => unknown) | undefined;
"icon"?: (() => unknown) | undefined;
"default"?: (() => unknown) | undefined;
"footer"?: (() => unknown) | undefined;
};通过基础 beforeClose 守卫关闭；过渡钩子仍由内部处理。
参数与事件说明
handleClose
必填：是；声明来源：上游声明。
handleClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamDrawerExpose 公开类型视图
ts
import type { AsamDrawerExpose } from '@asam-ui/ui';
// AsamDrawerExpose
type PublicContract = {
"handleClose": () => void;
};浮层使用独立尺寸，与控件密度分别配置。
组合契约按分支生效；请同时查看公开类型。
AsamDrawerSize 公开类型视图
ts
import type { AsamDrawerSize } from '@asam-ui/ui';
// AsamDrawerSize
type PublicContract = AsamDrawerSize;