UNPKG

3.31 kBMarkdownView Raw
1# bee-clipboard
2
3[![npm version](https://img.shields.io/npm/v/bee-clipboard.svg)](https://www.npmjs.com/package/bee-clipboard)
4[![Build Status](https://img.shields.io/travis/tinper-bee/bee-clipboard/master.svg)](https://travis-ci.org/tinper-bee/bee-clipboard)
5[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-clipboard/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-clipboard?branch=master)
6[![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-clipboard.svg)](https://david-dm.org/tinper-bee/bee-clipboard#info=devDependencies)
7[![NPM downloads](http://img.shields.io/npm/dm/bee-clipboard.svg?style=flat)](https://npmjs.org/package/bee-clipboard)
8[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-clipboard.svg)](http://isitmaintained.com/project/tinper-bee/bee-clipboard "Average time to resolve an issue")
9[![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-clipboard.svg)](http://isitmaintained.com/project/tinper-bee/bee-clipboard "Percentage of issues still open")
10
11>基于clipboard.js封装的复制组件
12
13## Browser Support
14
15| <img src="https://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://clipboardjs.com/assets/images/edge.png" width="48px" height="48px" alt="Edge logo"> | <img src="https://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
16|:---:|:---:|:---:|:---:|:---:|:---:|
17| 42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |
18
19
20react bee-clipboard component for tinper-bee
21
22复制组件
23
24## 使用方法
25
26```js
27import Modal from 'bee-clipboard';
28
29class ClipboardDemo extends Component {
30 render() {
31 function success() {
32 console.log('success');
33 }
34
35 function error() {
36 console.log('error');
37 }
38
39 return (
40 <Clipboard action="copy" text="我将被复制到剪切板" success={success} error={error}>
41
42 </Clipboard>
43 )
44 }
45}
46```
47
48#### 样式引入
49- 可以使用link引入build目录下Clipboard.css
50```
51<link rel="stylesheet" href="./node_modules/bee-modal/build/Clipboard.css">
52```
53- 可以在js中import样式
54```js
55import "./node_modules/bee-modal/src/Clipboard.scss"
56//或是
57import "./node_modules/bee-modal/build/Clipboard.css"
58```
59
60
61
62## API
63
64|参数|说明|类型|默认值|
65|:---|:---:|:--:|---:|
66|text|要复制的文本内容|`string`|-|
67|target|要复制内容的目标元素，可传选择器，如果选择器得出多个，会取第一个|`string`|-|
68|success|复制成功之后的回调函数|`function`|-|
69|error|复制失败之后的回调函数|`function`|-|
70
71#### 开发调试
72
73```sh
74$ npm install -g bee-tools
75$ git clone https://github.com/tinper-bee/bee-clipboard
76$ cd bee-clipboard
77$ npm install
78$ npm run dev
79```