---
title: "WithCopy"
description: "带复制功能的输入框组件。"
seo_title: "WithCopy"
seo_description: "An input with a copy-to-clipboard button, built on the Nuxt UI input."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/components/with-copy"
---
# WithCopy

> 带复制功能的输入框组件。

## 简介

`WithCopy` 是一个带有一键复制功能的输入框组件。当输入框有内容时，会在右侧显示一个复制按钮，点击可快速复制输入框中的内容到剪贴板。

> \[\!NOTE\]
> See: https://ui.nuxt.com/docs/components/input
> 
> 基于 Nuxt UI 的 Input 组件封装

## 用法

右侧复制按钮一键复制内容到剪贴板：

```vue
<script setup lang="ts">
const value = ref("sk-1234567890abcdef")
</script>

<template>
  <MWithCopy />
</template>
```

### `leadingIcon` 前置图标

通过 `leadingIcon` 为输入框添加语义化图标：

```vue
<template>
  <MWithCopy leading-icon="i-lucide-key" />
</template>
```

### `size` 尺寸

通过 `size` 切换输入框与复制按钮尺寸：

```vue
<script setup lang="ts">
const value = ref("ABC123XYZ")
</script>

<template>
  <MWithCopy size="md" />
</template>
```

### `buttonProps` 复制按钮

通过 `buttonProps` 自定义复制按钮样式：

```vue
<template>
  <MWithCopy v-model="value" :button-props='{"variant":"soft","color":"primary"}' />
</template>
```

## 示例

### 复制事件

通过 `@copy` 事件监听复制操作：

```vue [ComponentsWithCopyEventExample.vue]
<script setup lang="ts">
const toast = useToast()
const content = ref('这是一段可复制的文本')

function handleCopy(value: string) {
  toast.add({
    title: '已复制',
    description: `复制内容: ${value}`,
    color: 'success'
  })
}
</script>

<template>
  <MWithCopy v-model="content" @copy="handleCopy" />
</template>
```

## API

### Props

```ts
/**
 * Props for the MWithCopy component
 */
interface MWithCopyProps {
  buttonProps?: ButtonProps | undefined;
  tooltipProps?: TooltipProps | undefined;
  ui?: (Record<string, C> & { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; }) | undefined;
  /**
   * The element or component this component should render as.
   */
  as?: any;
  id?: string | undefined;
  name?: string | undefined;
  type?: InputTypeHTMLAttribute | undefined;
  /**
   * The placeholder text when the input is empty.
   */
  placeholder?: string | undefined;
  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "important" | "neutral" | undefined;
  variant?: "outline" | "soft" | "subtle" | "ghost" | "none" | undefined;
  size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  required?: boolean | undefined;
  autocomplete?: (string & {}) | "on" | "off" | undefined;
  autofocus?: boolean | undefined;
  autofocusDelay?: number | undefined;
  disabled?: boolean | undefined;
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  /**
   * Keep the mobile text size on all breakpoints.
   */
  fixed?: boolean | undefined;
  defaultValue?: T | undefined;
  modelModifiers?: ModelModifiers | undefined;
  /**
   * Display an icon based on the `leading` and `trailing` props.
   */
  icon?: any;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the icon will be displayed on the left side.
   */
  leading?: boolean | undefined;
  /**
   * Display an icon on the left side.
   */
  leadingIcon?: any;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  /**
   * Display an icon on the right side.
   */
  trailingIcon?: any;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * The icon when the `loading` prop is `true`.
   */
  loadingIcon?: any;
  enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  list?: string | undefined;
  max?: Numberish | undefined;
  maxlength?: Numberish | undefined;
  min?: Numberish | undefined;
  minlength?: Numberish | undefined;
  pattern?: string | undefined;
  readonly?: Booleanish | undefined;
  step?: Numberish | undefined;
  modelValue?: T | undefined;
}
```

### Emits

```ts
/**
 * Emitted events for the MWithCopy component
 */
interface MWithCopyEmits {
  update:modelValue: (payload: [value: T]) => void;
  blur: (payload: [event: FocusEvent]) => void;
  change: (payload: [event: Event]) => void;
  copy: (payload: [value: string]) => void;
  update:modelValue: (payload: [value: T | undefined]) => void;
}
```

### Slots

```ts
/**
 * Slots for the MWithCopy component
 */
interface MWithCopySlots {
  leading(): any;
  default(): any;
}
```

## Theme

<component-theme></component-theme>## Changelog

See commit history for [src/runtime/components/input/WithCopy.vue](https://github.com/mhaibaraai/movk-nuxt/commits/main/src/runtime/components/input/WithCopy.vue).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.