WithCharacterLimit

带字符数限制和计数显示的输入框组件。

简介

MWithCharacterLimit 是一个带有字符数限制和实时计数显示的输入框组件。在输入框右侧实时显示当前字符数和最大字符限制，帮助用户控制输入长度。

基于 Nuxt UI 的 Input 组件封装

用法

默认限制 50 个字符，右侧实时显示已输入与上限：

9/50

<script setup lang="ts">
const value = ref("最多输入字符...")
</script>

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

`maxLength` 字符上限

通过 maxLength 设置最大字符数：

maxLength

0/10

<template>
  <MWithCharacterLimit :max-length="10" />
</template>

`leadingIcon` 前置图标

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

leadingIcon

0/50

<template>
  <MWithCharacterLimit leading-icon="i-lucide-message-square" />
</template>

`size` 尺寸

通过 size 切换输入框与计数器尺寸：

size

0/50

<template>
  <MWithCharacterLimit size="md" />
</template>

`ui` 样式

通过 ui.counter 自定义计数器样式：

maxLength

ui.counter

0/100

<template>
  <MWithCharacterLimit :max-length="100" :ui="{ counter: 'text-success' }" />
</template>

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`maxLength`	`50`	`number` 最大允许输入的字符数
`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; counter?: SlotClass; }`

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

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: {
    withCharacterLimit: {
      slots: {
        trailing: 'pointer-events-none',
        counter: 'text-xs text-muted tabular-nums'
      }
    }
  }
})

Changelog

No recent changes

ThemePicker

可视化主题配置组件。

WithClear

带清除按钮的输入框组件。