Copy Clipboard

A component that provides a simple way to copy text to the clipboard with a confirmation tooltip. It uses the Clipboard API and provides a flexible way to customize the copy confirmation UI.

Props

Name	Default	Type
`text`	-	`string` The text to copy to the clipboard
`confirm`	`false`	`string` `boolean` Whether to show a confirmation tooltip. If set to string, uses it as the confirmation message
`confirm-time`	`1500`	`number` How long the confirmation tooltip should be visible in milliseconds
`confirm-placement`	`top`	`Placement` Position of the confirmation tooltip (from `@floating-ui/vue` library)
`transition-name`	`fade`	`string` `none` Allows you to change or disable the vue transition for the confirmation tooltip. By default, a `fade` animation with direction depending on the placement is used.

Slots

Name	Accepts	Props	Description
`default`	`any`	`DefaultSlotProps`	Main content of the copy button
`confirm`	`any`	-	Custom confirmation tooltip content

interface DefaultSlotProps {
  // Manually call the copying function
  copy: () => void
  // Tracks whether the text has been copied
  // for the set amount of duration by confirm-time
  copied: Ref<boolean>
}

Customized

Here's a heavily customized copy-clipboard using all the props