43 lines
1.4 KiB
Vue
43 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { dialogTitleOf, drawerLayoutSpec } from './modal-model'
|
|
|
|
/**
|
|
* DrawerShell 右侧抽屉容器（module 13 task 248）：封装 el-drawer，统一 admin 尺寸
|
|
* 与关闭语义（遮罩/Esc），标题透传默认头部、footer 槽承接底部按钮，构成头/体/脚三段。
|
|
*/
|
|
const props = withDefaults(
|
|
defineProps<{ modelValue: boolean; title?: string; subtitle?: string; width?: string | number }>(),
|
|
{ title: '', subtitle: '', width: drawerLayoutSpec().width },
|
|
)
|
|
const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
|
|
|
|
const visible = computed({
|
|
get: () => props.modelValue,
|
|
set: (v: boolean) => emit('update:modelValue', v),
|
|
})
|
|
const spec = computed(() => drawerLayoutSpec())
|
|
const head = computed(() => dialogTitleOf({ title: props.title, subtitle: props.subtitle }))
|
|
</script>
|
|
|
|
<template>
|
|
<el-drawer
|
|
v-model="visible"
|
|
:size="width"
|
|
:title="head.title"
|
|
:close-on-click-modal="spec.maskClosable"
|
|
:close-on-press-escape="spec.escClosable"
|
|
class="admin-drawer-shell"
|
|
>
|
|
<p v-if="head.subtitle" class="admin-drawer-subtitle">{{ head.subtitle }}</p>
|
|
<slot />
|
|
<template #footer>
|
|
<slot name="footer" />
|
|
</template>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.admin-drawer-subtitle { margin: 0 0 12px; color: var(--admin-muted); font-size: 13px; }
|
|
</style>
|