cnd-components-mcp/componentData/components/CndCopy.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

---
group:
  title: 云原生业务组件
---
# Copy 复制组件

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-copy

## 基本使用

```tsx preview
import React from "react";
import { Copy } from "@ali/cnd";

const Demo = () => {
  const message = "this is a message";
  return <Copy text={message}>{message}</Copy>;
};

export default Demo;
```

## showIcon

```tsx preview
import React from "react";
import { Copy } from "@ali/cnd";

const Demo = () => {
  const message = "this is a message";
  return (
    <Copy text={message} showIcon>
      {message}
    </Copy>
  );
};

export default Demo;
```

## 自定义 icon 样式

```tsx preview
import React from "react";
import { Copy, Icon } from "@ali/cnd";

const Demo = () => {
  const message = "this is a message";
  return (
    <Copy
      text={message}
      showIcon
      icon={
        <>
          <span>一键复制</span>
          <Icon className="ml-4" type="copy" size="xs" />
        </>
      }
    >
      {message}
    </Copy>
  );
};

export default Demo;
```

## 内容过多

```tsx preview
import React from "react";
import { Copy, Icon } from "@ali/cnd";

const Demo = () => {
  const message = "集成Truncate组件，当内容过多时，进行溢出隐藏设置";
  return (
    <Copy
      text={message}
      showIcon
      truncateProps={{
        threshold: 20,
      }}
    >
      {message}
    </Copy>
  );
};

export default Demo;
```

## API

| 属性     | 说明                 | 类型            | 默认值 |
| -------- | -------------------- | --------------- | ------ |
| children | 子节点               | React.ReactNode | -      |
| text     | 复制的内容           | string          | -      |
| showIcon | 是否默认显示复制按钮 | boolean         | false  |
| icon     | 自定义触发复制的元素 | React.ReactNode |        |
| iconSize | 指定图标大小         | IconSize        |        |
| truncateProps |  默认没有截断效果，传入则显示截断<br /> 属性透传给 [RcTruncate 文本截断](https://xconsole.aliyun-inc.com/nexconsole/component_web/eaxi78)组件                                                                    | object        | -                                                                                        |

> IconSize 可枚举值：number,'xxs','xs','small','medium','large','xl','xxl','xxxl','inherit';