tinper-beebee-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