iclipboard: 一个更好用的复制文本到剪贴板的 npm 包

HamletBaird 发布于11天前 阅读42次
0 条评论

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

查看原文: iclipboard: 一个更好用的复制文本到剪贴板的 npm 包

  • greenswan
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。