PUCopyToClipboard Component
A hand-drawn style copy-to-clipboard component with success feedback and smooth animations
Usage
Basic Usage
Different Sizes
Custom Text
Disabled State
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| text | string | No | Copy | Button text |
| value | string | No | '' | Text to copy to clipboard |
| successText | string | No | Copied! | Success message text |
| disabled | boolean | No | false | Disabled state |
| size | small | medium | large | No | medium | Button size |
| customClass | string | No | '' | Custom CSS classes |
Events
| Event | Payload | Description |
|---|---|---|
| copy | string | Emitted when copy is initiated |
| success | string | Emitted when copy is successful |
| error | Error | Emitted when copy fails |
Features
- Hand-drawn style button with organic shadows
- Smooth success animation with icon change
- Uses modern Clipboard API
- Automatic reset after 2 seconds
- Multiple sizes for different use cases
- Disabled state support
- Customizable text and success messages
- Dark mode support
- Responsive design
Dependencies
- Tailwind CSS for styling
- Vue 3 Composition API
- Modern browser Clipboard API