Skip to content

Custom Double-Click

Example showing how to override default double-click behavior.

Code Example

vue
<template>
  <vue-finder
    id="custom-dclick"
    :driver="driver"
    @file-dclick="handleFileDclick"
    @folder-dclick="handleFolderDclick"
  />
</template>

<script setup>
const handleFileDclick = (file) => {
  // Custom behavior for file double-click
  console.log('File double-clicked:', file);
  // Example: Download instead of preview
  window.open(file.downloadUrl, '_blank');
};

const handleFolderDclick = (folder) => {
  // Custom behavior for folder double-click
  console.log('Folder double-clicked:', folder);
  // Example: Show folder info instead of navigating
  alert(`Folder: ${folder.name}`);
};
</script>

Explanation

When you provide @file-dclick or @folder-dclick handlers, they override the default behavior:

  • File double-click: Default opens preview, custom handler can download, open externally, etc.
  • Folder double-click: Default navigates into folder, custom handler can show info, add to favorites, etc.

See Guide - Events for more information about events.