Copy Clipboard (BcCopyField)
Champ lecture seule avec bouton de copie en un clic. Idéal pour les clés API, endpoints, tokens et identifiants non modifiables.
Démo
Clé API de production :
Endpoint OAuth :
Avec labels personnalisés :
Implémentation
vue
<BcCopyField value="sk-bc-prod-a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6" />
<!-- Avec labels personnalisés -->
<BcCopyField
value="wh_live_9x8y7z6w5v4u3t2s1r0q"
copy-label="Copier le token"
copied-label="Token copié !"
@copy="({ value, success }) => console.log(value, success)"
/>Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
value | String | — | Valeur à afficher et copier |
copyLabel | String | "Copier" | Libellé du bouton de copie |
copiedLabel | String | "Copié" | Libellé après copie réussie |
ariaLabel | String | "Copier la valeur" | Label ARIA du bouton |
Événements
| Événement | Payload | Description |
|---|---|---|
@copy | { value: string, success: boolean } | Émis après tentative de copie |
Cas d'usage
html
<!-- Clé API -->
<BcCopyField value="sk-bc-prod-a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6" />
<!-- Webhook URL dynamique -->
<BcCopyField :value="`https://api.bconnect.fr/v1/partners/${partnerId}/webhooks`" />
<!-- Avec feedback personnalisé -->
<BcCopyField
value="client-secret-xyz"
copy-label="Copier le secret"
copied-label="Secret copié !"
/>Règles d'utilisation
- Toujours readonly : ne jamais rendre ce champ éditable — utiliser
BcFieldpour ça - Police mono : le composant applique automatiquement la police mono pour les tokens, clés et URLs techniques
- Feedback intégré : le retour "Copié !" (2s) est géré par le composant — pas besoin de gérer l'état externe