自定义通用组件开发

1.复制粘贴按钮组件（CopyButton）

components/Common/CopyButton.tsx

import React from 'react';
import { CopyOutlined } from '@ant-design/icons';
import { Button, message } from 'antd';

// 自定义复制按钮组件,传入text文件则可完成复制操作
const CopyButton = ({ text }) => {
  const copyToClipboard = () => {
    navigator.clipboard.writeText(text).then(
      () => message.success('复制成功'),
      () => message.error('复制失败')
    );
  };

  return (
    <Button icon={<CopyOutlined />} onClick={copyToClipboard}>
      复制
    </Button>
  );
};

export default CopyButton;

说明

1）antd提供了clipboard复制功能，此处将复制按钮封装为一个通用的组件供其他模块引用

2）引用方式：导入CopyButton，传入要复制的文本内容即可完成复制操作

// 导入
import CopyButton from "@/components/Common/CopyButton";

// 引用（指定text文本内容）
<CopyButton text='要复制的内容' />
<CopyButton text={copyParam} />