When I was writing another drawer component, I encountered a problem: slots have limitations

[whaijungit]

Vue version

3.5.22

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-3hpyzzaf?file=src%2Fcomponents%2FDrawer%2Findex.vue,src%2FApp.vue,src%2Fmain.ts&terminal=dev

Steps to reproduce

close

<script setup lang="ts"> import { disabledTabEvent } from '@/utils' import { onMounted, onUnmounted, useTemplateRef, watchEffect } from 'vue'

interface DialogProps {
open?: boolean
}

interface DialogEmits {
(name: 'cancel', ev: MouseEvent): void
}

defineOptions({
name: 'VDialog',
})
const emits = defineEmits()
const props = defineProps()
// ref
const dialogRef = useTemplateRef('dialog')
onMounted(() => {
window.addEventListener('keydown', disabledTabEvent)
})
onUnmounted(() => {
window.removeEventListener('keydown', disabledTabEvent)
})

watchEffect(() => {
if (props.open) {
window.addEventListener('keydown', disabledTabEvent)
} else {
window.removeEventListener('keydown', disabledTabEvent)
}
})
</script>

<style scoped lang="scss"> .v-dialog { inset: 0; z-index: 999; display: none; position: fixed; background-color: #f20; opacity: 0.6; &.open { display: block; } } </style>

What is expected?

Clicking the "submit" button triggers the form submission event, while clicking the "reset" button triggers the form reset event. I previously used Ant Design Drawer, and its usage is like thishttps://ant.design/components/drawer-cn#drawer-demo-basic-right

What is actually happening?

显示/关闭 提交 取消 12313 <script setup lang="ts"> import { Drawer } from '@/components/drawer' import { ref } from 'vue' const open = ref(false) </script>

System Info

Any additional comments?

No response

[edison1105]

I don't understand what you're saying. After running your reproduction, the submit and reset buttons don't appear. If you want to trigger form events by clicking submit button, you should place the submit button inside the form tag.

[whaijungit]

I don't understand what you're saying. After running your reproduction, the submit and reset buttons don't appear. If you want to trigger form events by clicking submit button, you should place the submit button inside the form tag.
I want the default slot to treat the head slot and tail slot as its child elements. How should I write this slot for the dialog component