Site Logo

Movk Nuxt

WithCopy

View source
带复制功能的输入框组件

简介

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

基于 Nuxt UI 的 Input 组件封装

基础用法

最简单的复制功能输入框：

<script setup lang="ts">
const apiKey = ref('sk-1234567890abcdef')
</script>

<template>
  <MWithCopy v-model="apiKey" placeholder="输入内容..." />
</template>

带图标

为输入框添加语义化图标：

<script setup lang="ts">
const token = ref('ghp_abcdef1234567890')
</script>

<template>
  <MWithCopy v-model="token" leading-icon="i-lucide-key" placeholder="GitHub Token" />
</template>

自定义样式

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

<script setup lang="ts">
const code = ref('ABC123XYZ')
</script>

<template>
  <MWithCopy
    v-model="code"
    color="primary"
    size="lg"
    :button-props="{
      variant: 'soft',
      color: 'primary'
    }"
    placeholder="兑换码"
  />
</template>

复制事件

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

<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

Prop Default Type
as'div'any

The element or component this component should render as.

buttonProps ButtonProps
tooltipProps TooltipProps
id string
name string
type "number" | "color" | "button" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week" | string & {}
placeholder string

The placeholder text when the input is empty.

color'primary' "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
variant'outline' "outline" | "soft" | "subtle" | "ghost" | "none"
size'md' "xs" | "sm" | "md" | "lg" | "xl"
requiredboolean
autocomplete string
autofocusboolean
autofocusDelay number
disabledboolean
highlightboolean

Highlight the ring color like a focus state.

defaultValue null | string | number | bigint | false | true
modelModifiers ModelModifiers<AcceptableValue>
iconany

Display an icon based on the leading and trailing props.

avatar AvatarProps

Display an avatar on the left side.

leadingboolean

When true, the icon will be displayed on the left side.

leadingIconany

Display an icon on the left side.

trailingboolean

When true, the icon will be displayed on the right side.

trailingIconany

Display an icon on the right side.

loadingboolean

When true, the loading icon will be displayed.

loadingIconappConfig.ui.icons.loadingany

The icon when the loading prop is true.

list string
max string | number
maxlength string | number
min string | number
minlength string | number
pattern string
readonly false | true | "true" | "false"
step string | number
modelValue null | string | number | bigint | false | true
ui { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; }

Emits

Event Type
update:modelValue[value: AcceptableValue]
blur[event: FocusEvent]
change[event: Event]
copy[value: string]
update:modelValue[value: AcceptableValue | undefined]

Slots

Slot Type
leading{ ui: { root: (props?: Record<string, any> | undefined) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailing: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; }
default{ ui: { root: (props?: Record<string, any> | undefined) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailing: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; }

Changelog

d4a6c — refactor: 将组件 Props 类型定义提取到独立文件

9bdda — refactor: 优化组件代码格式

e49b2 — ♻️ refactor: 为输入增强组件添加泛型类型支持

0151f — ✨ feat: 新增输入增强组件 WithCopy 和 WithCharacterLimit

WithClear

带清除按钮的输入框组件

WithPasswordToggle

带显示/隐藏切换的密码输入框组件

Copyright © 2025 - 2026 YiXuan - MIT License