如何在React项目的Swagger UI中自定义复制按钮的复制文本？

能否定制？ #

完全可以。Swagger UI提供了插件扩展机制，允许你覆盖默认组件或拦截事件，从而自定义复制按钮的行为和复制内容。

是否需要第三方包？ #

不是必须的。你可以使用浏览器原生的navigator.clipboard API实现复制功能；但如果需要更好的兼容性（比如兼容旧版浏览器）或简化操作，copy-to-clipboard这类第三方包会是更便捷的选择。

具体实现方法 #

方法一：通过Swagger UI插件定制（推荐）

利用Swagger UI的插件系统，覆盖默认的CopyButton组件，自定义复制逻辑：

1. 创建自定义插件

const CustomCopyPlugin = () => {
  return {
    wrapComponents: {
      CopyButton: (OriginalComponent) => (props) => {
        const handleCustomCopy = () => {
          // 获取原复制文本，按需修改
          const originalText = props.value;
          const customText = `// 自定义前缀：API请求示例\n${originalText}`;

          // 用原生API复制
          navigator.clipboard.writeText(customText)
            .then(() => {
              // 触发Swagger UI自带的复制成功回调（比如显示提示）
              props.onCopySuccess?.();
            })
            .catch(err => console.error('复制失败:', err));
        };

        // 替换原按钮的点击事件
        return <OriginalComponent {...props} onClick={handleCustomCopy} />;
      }
    }
  };
};

2. 在React组件中引入插件

import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

function SwaggerDocs() {
  return (
    <SwaggerUI
      url="/your-swagger-spec.json"
      plugins={[CustomCopyPlugin()]}
    />
  );
}

export default SwaggerDocs;

方法二：使用第三方复制包（兼容性更优）

如果需要兼容不支持navigator.clipboard的旧浏览器，可以用copy-to-clipboard包：

1. 安装依赖

npm install copy-to-clipboard

2. 修改插件中的复制逻辑

import copy from 'copy-to-clipboard';

const handleCustomCopy = () => {
  const originalText = props.value;
  const customText = `// 自定义前缀：API请求示例\n${originalText}`;

  // 用第三方包复制
  const isSuccess = copy(customText);
  if (isSuccess) {
    props.onCopySuccess?.();
  } else {
    console.error('复制失败');
  }
};

注意事项 #

• 不同场景下（比如复制API路径、请求体、响应示例），props.value的内容会不同，可根据实际需求调整自定义文本的逻辑。
• Swagger UI版本不同，插件API可能略有差异，建议对应官方文档调整代码。

内容的提问来源于stack exchange，提问作者Swathi