WithCopy
带复制功能的输入框组件。
简介
WithCopy 是一个带有一键复制功能的输入框组件。当输入框有内容时，会在右侧显示一个复制按钮，点击可快速复制输入框中的内容到剪贴板。
用法
右侧复制按钮一键复制内容到剪贴板：
<script setup lang="ts">
const value = ref("sk-1234567890abcdef")
</script>
<template>
<MWithCopy v-model="value" />
</template>
leadingIcon 前置图标
通过 leadingIcon 为输入框添加语义化图标：
<template>
<MWithCopy leading-icon="i-lucide-key" />
</template>
size 尺寸
通过 size 切换输入框与复制按钮尺寸：
<script setup lang="ts">
const value = ref("ABC123XYZ")
</script>
<template>
<MWithCopy v-model="value" size="md" />
</template>
buttonProps 复制按钮
通过 buttonProps 自定义复制按钮样式：
<template>
<MWithCopy v-model="value" :button-props="{ variant: 'soft', color: 'primary' }" />
</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 | 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 | stringThe placeholder text when the input is empty. | |
color | 'primary' | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "important" | "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 | Record<string, ClassNameValue> & { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; } |
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; }; } |
Theme
app.config.ts
export default defineAppConfig({
ui: {
withCopy: {
slots: {
trailing: 'pe-1'
}
}
}
})
Changelog
No recent changes