WithCopy
简介
WithCopy 是一个带有一键复制功能的输入框组件。当输入框有内容时，会在右侧显示一个复制按钮，点击可快速复制输入框中的内容到剪贴板。
基础用法
最简单的复制功能输入框：
<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' | anyThe element or component this component should render as. |
buttonProps | ButtonPropsCustom props for the copy button
| |
tooltipProps | TooltipPropsCustom props for the tooltip
| |
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 | stringThe 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" |
autocomplete | string & {} | "on" | "off"
| |
autofocusDelay | number | |
defaultValue | T | |
modelModifiers | ModelModifiers
| |
icon | anyDisplay an icon based on the | |
avatar | AvatarPropsDisplay an avatar on the left side.
| |
leadingIcon | anyDisplay an icon on the left side. | |
trailingIcon | anyDisplay an icon on the right side. | |
loadingIcon | appConfig.ui.icons.loading | anyThe icon when the |
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 | T | |
required | boolean | |
autofocus | boolean | |
disabled | boolean | |
highlight | booleanHighlight the ring color like a focus state. | |
fixed | booleanKeep the mobile text size on all breakpoints. | |
leading | booleanWhen | |
trailing | booleanWhen | |
loading | booleanWhen | |
ui | { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; } |
Emits
| Event | Type |
|---|---|
update:modelValue | [value: T] |
blur | [event: FocusEvent] |
change | [event: Event] |
copy | [value: string] |
Slots
| Slot | Type |
|---|---|
leading | { ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; } |
default | { ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; } |