Package Exports

bee-clipboard
bee-clipboard/build/Clipboard.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bee-clipboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

bee-clipboard

基于clipboard.js封装的复制组件

react bee-clipboard component for tinper-bee

复制组件

Browser Support


42+ ✔	12+ ✔	41+ ✔	9+ ✔	29+ ✔	10+ ✔

使用方法

import Clipboard from 'bee-clipboard';

class ClipboardDemo extends Component {
    render() {
        function success() {
            console.log('success');
        }

        function error() {
            console.log('error');
        }

        return (
            <Clipboard action="copy" text="我将被复制到剪切板" success={success} error={error}>

            </Clipboard>
        )
    }
}

样式引入

可以使用link引入build目录下Clipboard.css

<link rel="stylesheet" href="./node_modules/bee-clipboard/build/Clipboard.css">

可以在js中import样式

import "./node_modules/bee-clipboard/src/Clipboard.scss"
//或是
import "./node_modules/bee-clipboard/build/Clipboard.css"

API

参数	说明	类型	默认值
action	方法，可以传`copy`或者`cut`,`cut`只支持`textarea`	`string`	`copy`
text	要复制的文本内容	`string`	-
target	要复制内容的目标元素，可传选择器，如果选择器得出多个，会取第一个	`string`/dom选择器	-
success	复制成功之后的回调函数	`function`	-
error	复制失败之后的回调函数	`function`	-
locale	设置默认文字语言	object	中文

多语设置

通过给Clipboard组件设置locale语言对象。

如：

export default {
    lang: 'zh-cn',
    copy: '复制',
    cut: '剪切',
    copyReady: '已复制',
    cutReady: '已剪切'
}

组件内默认中文，提供英文包。

import en from 'bee-clipboard/build/en_US.js';

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-clipboard
$ cd bee-clipboard
$ npm install
$ npm run dev