clipboard copy element

<剪貼板 - 拷貝>元素

將元素文本內容或輸入值複製到剪貼板。

安裝

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

用法

腳本

作為ES模塊導入：

 import '@github/clipboard-copy-element'

帶有腳本標籤：

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

標記

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

數據源

屬性

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

元素內容

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

表單輸入

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

超鏈接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 > 

事件

複製到剪貼板後，從<clipboard-copy>元素派出了clipboard-copy事件：

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

瀏覽器支持

沒有本機自定義元素支持的瀏覽器需要多填充。

• 鉻合金
• Firefox
• 野生動物園
• Microsoft Edge

發展

 npm install
npm test

執照

根據MIT許可分發。有關詳細信息，請參見許可證。