原生JS实现复制功能

适用React、Vue、Angular框架

• 实现: 利用JS原生提供的API，点击时模拟电脑键Ctrl+c的功能;
• API: createRange,execCommand等等;
• 下面上代码:

import React, { Component } from 'react'; 
import { List, Button, message } from 'antd';

const Item = List.Item
class textList extends Component {
	constructor(props) {
	  super(props);
	  this.state = {};
	  this.list=[
			{title:'1',value:'red'},
			{title:'2',value:'orange'},
			{title:'3',value:'yellow'},
			{title:'4',value:'pick'},
	  ];
	};
	copyContent(val){
        // 清除组件渲染前粘贴板的内容
		window.getSelection().removeAllRanges();
        // 生成复制区域的dom元素
		const activeCodeSpan = document.getElementById(`${val.title}`);
        // 创建一个区域
		const range = document.createRange();
        // 区域选中需要复制内容的dom元素
		range.selectNodeContents(activeCodeSpan);
        // window全局下，选中这个range
		window.getSelection().addRange(range);
        // 模拟电脑Ctrl+c的命令
		const tag = document.execCommand("copy");
		if(tag){
			message.success('内容已复制成功',1);
            // 复制成功，清除粘贴板中的内容
			window.getSelection().removeAllRanges();
		};
	};
	render(){
		return(
			<List
				itemLayout='horizontal'
				dataSource={this.list}
				renderItem={item => (
					<Item
						id={item.title}
						actions={[<Button onClick={() => {this.copyContent(item)}}>复制</Button>]}
					>
						<Item.Meta
	                        title={item.title}
	                        description={item.value}
	                    />
	                </Item>
				)}
			>
			</List>
		)
	}	
}

export default textList;