最近开发遇到一个需求, 要把一串文字复制到剪贴板, 然后就看了下 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>
       }
   }