---
url: /guide/copy-text.md
description: >-
  了解如何使用 @theojs/lumen 的 CopyText
  组件来实现点击复制文本功能。该组件支持自定义图标、提示信息和位置，适用于各种场景，如代码片段、链接等。
---

# 复制按钮组件 - CopyText

## 引入组件

```ts [.vitepress/theme/index.ts]
// [!code ++]
import type { EnhanceAppContext } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
// [!code ++]
import { CopyText } from '@theojs/lumen'

export default {
  extends: DefaultTheme,
  // [!code ++]
  enhanceApp: ({ app }: EnhanceAppContext) => {
    app.component('Copy', CopyText) // [!code ++]
  } // [!code ++]
}
```

这里将组件注册为 `Copy`，这是自定义的全局别名。也可以改为 `app.component('CopyText', CopyText)`，并在页面中使用 `<CopyText />`。

::: tip
组件使用浏览器 Clipboard API。请在 HTTPS 或本地开发环境中使用，并确保浏览器允许页面访问剪贴板。
:::

## 使用示例

**输入**

```vue-html
<Copy label="显示的文本" text="hello world" />
<Copy type="auto" text="无图标" noIcon />
<Copy type="info" text="加粗文本" bold />
<Copy type="tip" text="复制这段文字" toolTip="Copied" toolTipPos="bottom" />
<Copy type="warning" text="更换图标" icon="material-symbols:content-copy" />
<Copy type="danger" text="使用图片" image="https://i.theojs.net/logo/lumen-logo-mini.svg" />

```

**输出**

<Copy label="显示的文本" text="hello world" />
<Copy type="auto" text="无图标" noIcon />
<Copy type="info" text="加粗文本" bold />
<Copy type="tip" text="复制这段文字" toolTip="Copied" toolTipPos="bottom" />
<Copy type="warning" text="更换图标" icon="material-symbols:content-copy" />
<Copy type="danger" text="使用图片" image="https://i.theojs.net/logo/lumen-logo-mini.svg" />

## 数据接口说明

|     字段     | 类型                                       | 说明                                                                                    | 是否必填              |
| :----------: | ------------------------------------------ | --------------------------------------------------------------------------------------- | --------------------- |
|    `type`    | `auto \| info \| tip \| warning \| danger` | 按钮颜色类型，默认值：`auto`                                                            | <Badge text="可选" /> |
|   `label`    | `string`                                   | 按钮上显示的文本，未设置时默认显示 `text`                                               | <Badge text="可选" /> |
|    `text`    | `string`                                   | 要复制的文本内容                                                                        | <Badge text="必填" /> |
|  `toolTip`   | `string`                                   | 复制成功后显示的提示文本，默认值：`已复制`                                              | <Badge text="可选" /> |
|   `noIcon`   | `boolean`                                  | 是否不显示图标，默认值：`false`                                                         | <Badge text="可选" /> |
|    `icon`    | `IconType`                                 | 按钮的图标，默认值：`heroicons-outline:clipboard-copy` 。详情查看 [IconType](#IconType) | <Badge text="可选" /> |
|   `image`    | `ImageType`                                | 按钮的图片 。详情查看 [ImageType](#ImageType)                                           | <Badge text="可选" /> |
| `toolTipPos` | `top \| bottom \| left \| right`           | 提示显示的位置，默认值：`top`                                                           | <Badge text="可选" /> |
|    `bold`    | `boolean`                                  | 是否启用加粗样式，启用时文字加粗 `font-weight: 500`，默认值：`false`                    | <Badge text="可选" /> |

## IconType

```ts
export type IconMode = string | { light: string; dark: string }

export type IconType =
  | string
  | { icon: string; color?: IconMode }
  | { light: string; dark: string; color?: IconMode }
  | { svg: IconMode }
```

## ImageType

```ts
export type ImageType =
  | string
  | { src: string; crop?: boolean; [prop: string]: any }
  | { light: string; dark: string; crop?: boolean; [prop: string]: any }
```

## 其他公共类型

```ts
export type SizeType = null | string | number
export type LinkType = string | undefined
export type RelType = string | undefined
export type TargetType = string | undefined
```