- antd
- antv
- random-id
生成唯一的随机数
// 安装
npm install random-id --save-dev
// 使用
import randomId from 'random-id';
...
const randomNum = randomId(8);
- clipboard
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中 。
// 安装
npm install clipboard --save-dev;
// 使用
import Clipboard from 'clipboard';
// 在react中使用，要在组件加载完成的时候，给复制按钮添加点击复制事件；在组件被卸载之前，解绑复制按钮的监听事件
componentDidMount() {
// 初始化clipboard
this.clipboardType = new Clipboard('#btn');
this.clipboardType.on('success', () => {
message.info('复制成功');
});
this.clipboardType.on('error', () => {
message.info('复制失败，请手动复制');
});
}
componentWillUnmount() {
this.clipboardType.destroy();
}
// 复制对象
<div id="target">copy target content</div>
// 复制按钮
<Icon
type="copy"
id="btn"
style={{
color: '#108ee9',
fontSize: '16px',
margin: '0 12px',
lineHeight: '20px',
cursor: 'pointer',
}}
data-clipboard-target="#target"
data-clipboard-action="copy"
/>
data-clipboard-target：指向复印目标节点；
data-clipboard-action：要执行的操作，可以是"copy"，也可以是"cut"，默认是"copy"，"cut"操作只使用于<input>和<textare>
在使用的过程中，还可以从属性中复制文本，这时候不需要一个元素当触发器，可以使用data-clipboard-text属性，在后面放上需要复制的文本。
<button id="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
还可以在初始化clipboard的时候，设置要复制或者剪切的内容
new Clipboard('#btn', {
text:() => "what you want to clipboard";
});
还可以在初始化clipboard的时候，设置要复制的节点
new Clipboard('#btn', {
target:() => document.getElementById("btn");
});
- react-codemirror
// 安装
npm install react-codemirror --save
// 使用
import 'CodeMirror' from 'react-codemirror';
// 引入css样式，也可以在样式文件中引入
import 'codemirror/lib/codemirror.css';
// 导入语言类型
import 'codemirror/mode/javascript/javascript';
// 导入theme文件
import 'codemirror/theme/ambiance.css';
// 定义options
const options = {
lineNumbers: true; // 显示行号
mode: {name: 'text/x-mysql'}, // 定义mode
theme: 选中的theme
readreadOnly: true; // 只读
lineWrapping: true; // 换行
}
// 在render函数中渲染，在项目中用于展示格式化的json字符串
<CodeMirror value={JSON.stringify(info, null, 2)} options={options} />
// 获取CodeMirror对象并对其操作
const editor = this.refs.editor-sql.getCodeMirror();
