bee-clipboard
基于clipboard.js封装的复制组件
react bee-clipboard component for tinper-bee
复制组件
Browser Support
42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |
使用方法
; { { console; } { console; } 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样式
//或是
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