复制 二维码

1. 复制功能----使用插件react-copy-to-clipboard

text: 需要复制的内容

onCopy：复制成功的回调函数

import CopyToClipboard from 'react-copy-to-clipboard';
import {
     message } from 'antd';

const Image = () => {
    
  const url = 'http://www.cccc';
  return (
    <CopyToClipboard text={
    url} onCopy={
    () => message.success('复制成功')}>
    ...
    </CopyToClipboard>
  );
};

export default Image;

2. 二维码显示----使用插件qrcode.react
   url：二维码链接

import QrcodeContainer from 'qrcode.react';

const Image = () => {
    
  const url = 'http://www.cccc';
  return (
      <div style={
    {
     width: 160, height: 160 }} className="qrcode">
        <QrcodeContainer
          style={
    {
     width: '100%', height: '100%' }}
          value={
    url}></QrcodeContainer>
      </div>
  );
};

export default Image;

3. 当鼠标移动到二维码上，出现复制的按钮----使用伪元素添加样式

.qrcode {
    
  position: relative;
}

.qrcode:hover::before {
    
  display: inline-block;
  content: '点击复制';
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
}

4. 完整代码

import CopyToClipboard from 'react-copy-to-clipboard';
import QrcodeContainer from 'qrcode.react';
import {
     message } from 'antd';
import './index.less';

const Image = () => {
    
  const url = 'http://www.cccc';
  return (
    <CopyToClipboard text={
    url} onCopy={
    () => message.success('复制成功')}>
      <div style={
    {
     width: 160, height: 160 }} className="qrcode">
        <QrcodeContainer
          style={
    {
     width: '100%', height: '100%' }}
          value={
    url}></QrcodeContainer>
      </div>
    </CopyToClipboard>
  );
};

export default Image;