27 lines
806 B
Vue
27 lines
806 B
Vue
|
<template>
|
||
|
|
<el-drawer v-bind="$attrs" :size="drawerSize" :show-close="false" append-to-body>
|
||
|
|
<template #header="{ close, titleId, titleClass }">
|
||
|
|
<h4 :id="titleId" :class="titleClass">{{ title }}</h4>
|
||
|
|
<el-button @click="toggleDrawerSize" icon="FullScreen" link></el-button>
|
||
|
|
<el-button @click="close" link icon="Close"></el-button>
|
||
|
|
</template>
|
||
|
|
<template v-for="(_value, name) in $slots" #[name]="scopeData">
|
||
|
|
<slot :name="name" v-bind="scopeData || {}"></slot>
|
||
|
|
</template>
|
||
|
|
</el-drawer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useDrawerSize } from './useDrawerSize';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
title: String,
|
||
|
|
initialSize: {
|
||
|
|
type: Number,
|
||
|
|
default: 800
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const { drawerSize, toggleDrawerSize } = useDrawerSize(props.initialSize);
|
||
|
|
</script>
|