Slot 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]

see #14085 (comment)