WithCopy

An input component with a copy-to-clipboard button.

Introduction

WithCopy is an input component with a one-click copy function. When the input has content, a copy button appears on the right. Clicking it quickly copies the input content to the clipboard.

Built on Nuxt UI's Input component

Usage

The copy button on the right copies content to the clipboard with one click:

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

<template>
  <MWithCopy v-model="value" />
</template>

`leadingIcon` Leading Icon

Add a semantic icon to the input via leadingIcon:

leadingIcon

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

`size` Size

Switch input and copy button size via size:

size

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

<template>
  <MWithCopy v-model="value" size="md" />
</template>

`buttonProps` Copy Button

Customize the copy button style via buttonProps:

modelValue

buttonProps.variant

buttonProps.color

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

Examples

Copy Event

Listen to copy actions via the @copy event:

<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>

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" \| "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`		`any` Display an icon based on the `leading` and `trailing` props.
`avatar`		`AvatarProps` Display an avatar on the left side.
`leadingIcon`		`any` Display an icon on the left side.
`trailingIcon`		`any` Display an icon on the right side.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` 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`		`T`
`required`		`boolean`
`autofocus`		`boolean`
`disabled`		`boolean`
`highlight`		`boolean` Highlight the ring color like a focus state.
`fixed`		`boolean` Keep the mobile text size on all breakpoints.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`ui`		`Record<string, ClassNameValue> & { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; }`

Event	Type
`update:modelValue`	`[value: T]`
`blur`	`[event: FocusEvent]`
`change`	`[event: Event]`
`copy`	`[value: string]`

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; }; }

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

WithClear

An input component with a clear button.

WithFloatingLabel

An input component with a floating label and clear button.