mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-27 17:52:16 +00:00
Add click handler to DropZone
This commit is contained in:
@@ -6,7 +6,11 @@ import { cn } from '@/utils/tailwindUtil'
|
|||||||
defineProps<{
|
defineProps<{
|
||||||
onDragOver?: (e: DragEvent) => boolean
|
onDragOver?: (e: DragEvent) => boolean
|
||||||
onDragDrop?: (e: DragEvent) => Promise<boolean> | boolean
|
onDragDrop?: (e: DragEvent) => Promise<boolean> | boolean
|
||||||
dropIndicator?: { label?: string; iconClass?: string }
|
dropIndicator?: {
|
||||||
|
label?: string
|
||||||
|
iconClass?: string
|
||||||
|
onClick?: (e: MouseEvent) => void
|
||||||
|
}
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const canAcceptDrop = ref(false)
|
const canAcceptDrop = ref(false)
|
||||||
@@ -32,7 +36,13 @@ const canAcceptDrop = ref(false)
|
|||||||
<slot />
|
<slot />
|
||||||
<div
|
<div
|
||||||
v-if="dropIndicator"
|
v-if="dropIndicator"
|
||||||
class="flex flex-col items-center align-center border-dashed rounded-lg border grow-1 w-full border-border-subtle my-3 py-2"
|
:class="
|
||||||
|
cn(
|
||||||
|
'flex flex-col items-center align-center border-dashed rounded-lg border grow-1 w-full border-border-subtle my-3 py-2',
|
||||||
|
dropIndicator?.onClick && 'cursor-pointer'
|
||||||
|
)
|
||||||
|
"
|
||||||
|
@click.prevent="(e: MouseEvent) => dropIndicator!.onClick?.(e)"
|
||||||
>
|
>
|
||||||
<span v-if="dropIndicator.label" v-text="dropIndicator.label" />
|
<span v-if="dropIndicator.label" v-text="dropIndicator.label" />
|
||||||
<i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
|
<i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
|
||||||
|
|||||||
@@ -86,7 +86,8 @@ const nodeDatas = computed(() => {
|
|||||||
? undefined
|
? undefined
|
||||||
: {
|
: {
|
||||||
iconClass: 'icon-[lucide--image]',
|
iconClass: 'icon-[lucide--image]',
|
||||||
label: t('Click to browse or drag an image')
|
label: t('Click to browse or drag an image'),
|
||||||
|
onClick: node.widgets?.[1]?.callback
|
||||||
}
|
}
|
||||||
//Only widgets is actually used
|
//Only widgets is actually used
|
||||||
return {
|
return {
|
||||||
|
|||||||
Reference in New Issue
Block a user