iclipboard: 一個更好用的複製文本到剪貼板的 npm 包

最近開發遇到一個需求, 要把一串文字複製到剪貼板, 然後就看了下 github, 發現了一個 star 2W 多的庫 clipboard, 想都沒想就拉來用了, 結果發現這貨真特麼不是一般的難用, 特別是和 react 或者 vue 綁定的時候, 簡直不想吐槽.

所以造了個用起來更舒服, 並且體積更小, 沒有依賴的庫來節省時間.

這個庫的名字叫 iclipboard.

你可以在 npm 上找到它: http://npmjs.com/package/icli....

或者在 GitHub 上查看源代碼: https://github.com/acrazing/i....

使用教程

1. 安裝: npm 或者 yarn 都可以

   npm install -S iclipboard
   yarn add iclipboard

2. 使用: 這個庫只提供了一個接口: copy(text): boolean, 使用的時候只需要調用這個函數就 ok:

   import { copy } from 'iclipboard'
   
   copy('你想要的字符串')

   但是需要注意: 複製粘貼操作瀏覽器限定只能是在用戶交互的時候發生, 因此一定是在某個元素的click或者其它事件回調中同步調用, 所以完整的代碼看起來大概長成這樣子:

   import { copy } from 'iclipboard'
   
   const button = document.getElementById('button-id')
   button.addEventListener('click', () => {
       if(copy('Hello world!')) {
           alert('複製成功')
       } else {
           alert('複製失敗')
       }
   })

   在 React 中調用也是一樣:

   import React from 'react'
   import { copy } from 'iclipboard'
   
   class App extends React.Component {
       handleClick = () => {
           if(copy('Hello world!')) {
               alert('複製成功')
           } else {
               alert('複製失敗')
           }
       }
       
       render() {
           return <button onClick={this.handleClick}>複製</button>
       }
   }