clipboard copy element

<Clipboard-Copy>

Copiez le contenu du texte de l'élément ou les valeurs d'entrée dans le presse-papiers.

Installation

 $ npm install --save @github/clipboard-copy-element

Usage

Scénario

Importer comme modules ES:

 import '@github/clipboard-copy-element'

Avec une balise de script:

 < script type =" module " src =" ./node_modules/@github/clipboard-copy-element/dist/index.js " >

Balisage

 < clipboard-copy for =" blob-path " class =" btn btn-sm BtnGroup-item " >
  Copy path
</ clipboard-copy >
< div id =" blob-path " > src/index.js </ div > 

Sources de données

Attribut

 < clipboard-copy value =" src/index.js " > Copy </ clipboard-copy >

Contenu des éléments

 < clipboard-copy for =" blob-path " > Copy </ clipboard-copy >
< div id =" blob-path " > src/index.js </ div >

Entrée de formulaire

 < clipboard-copy for =" blob-path " > Copy </ clipboard-copy >
< input id =" blob-path " value =" src/index.js " >

Hyperlien href

 < clipboard-copy for =" blob-path " > Copy full URL </ clipboard-copy >
< a id =" blob-path " href =" /path/to#my-blob " > Link text will not be copied </ a > 

Événements

Après avoir copie dans le presse-papiers, un événement clipboard-copy est expédié à partir de l'élément <clipboard-copy> :

 document . addEventListener ( 'clipboard-copy' , function ( event ) {
  const button = event . target
  button . classList . add ( 'highlight' )
} ) 

Support de navigateur

Les navigateurs sans support d'élément personnalisé natif nécessitent un polyfill.

• Chrome
• Incendier
• Safari
• Microsoft Edge

Développement

 npm install
npm test

Licence

Distribué sous la licence du MIT. Voir la licence pour plus de détails.