复制二维码

最新推荐文章于 2024-03-13 16:23:12 发布

爱上布洛格的鸭鸭

最新推荐文章于 2024-03-13 16:23:12 发布

阅读量267

点赞数

分类专栏：前端文章标签：前端 react

本文链接：https://blog.csdn.net/smallpig_code/article/details/130233017

版权

前端专栏收录该内容

14 篇文章 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;

二维码显示----使用插件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;

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

.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;
}

完整代码

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;