封装Upload组件后使用UploadDragger拖拽上传无法触发上传

[miyling]

TuSimple/naive-ui version (版本)

2.35.0

Vue version (Vue 版本)

3.3.4

Browser and its version (浏览器及其版本)

117.0.5938.149

System and its version (系统及其版本)

MacOS(13.6)

Node version (Node 版本)

v20.3.1

Reappearance link (重现链接)

https://codesandbox.io/p/sandbox/naive-issue-report-tkdwmt

Reappearance steps (重现步骤)

拖放文件到UploadDragger上传

Expected results (期望的结果)

拖放文件到UploadDragger内正常触发上传

Actual results (实际的结果)

拖放文件到UploadDragger内无法触发上传，点击上传正常

Remarks (补充说明)

[mhqpx]

因为Upload组件里面判断了slot的类型，但是二次封装后得到的type是Symbol类型，真正的类型在children里面。最简单的方法：通过外部设置uploadRef.value.draggerInsideRef.value = true来实现

// Upload.tsx
const { draggerInsideRef, mergedClsPrefix, $slots, directory, onRender } =
      this
    if ($slots.default && !this.abstract) {
      const firstChild = $slots.default()[0]
      if ((firstChild as any)?.type?.[uploadDraggerKey]) {
        draggerInsideRef.value = true
      }
    }

// UploadTrigger.tsx
 function handleTriggerDrop (e: DragEvent): void {
      e.preventDefault()
      if (
        !draggerInsideRef.value ||
        mergedDisabledRef.value ||
        maxReachedRef.value
      ) {
        dragOverRef.value = false
        return
      }

const el = uploadRef.value
if (el?.$slots?.default) {
      const defaultSlot = el.$slots?.default()[0]
      if (isSymbol(defaultSlot?.type) && isArray(defaultSlot.children)) {
        if (defaultSlot.children[0].type.name === 'UploadDragger') {
          el.draggerInsideRef.value = true
        }
      }
    }

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem

[s3xysteak]

因为这导致了n-upload组件有着奇怪的反直觉表现，所以我觉得这应当被认定为bug，请求reopen这个issue

[s3xysteak]

Hi，这样的二次封装解决了问题：

import { NUpload, type UploadProps } from 'naive-ui'
import api from '~api/common'

export default defineComponent<UploadProps>((_, { attrs, slots }) => {
  const action = API_URL + api.upload()

  return () => h(NUpload, { action, ...attrs }, {
    default: () => slots.default?.(),
  })
})

所以这甚至可能是个SFC的问题，导致了defineComponent与SFC表现不一致？