Site Logo

Movk Nuxt

WithCharacterLimit

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

简介

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

基于 Nuxt UI 的 Input 组件封装

基础用法

默认限制 50 个字符：

0/50
<script setup lang="ts">
const text = ref('')
</script>

<template>
  <MWithCharacterLimit v-model="text" placeholder="最多输入 50 个字符..." />
</template>

自定义限制

通过 maxLength 设置最大字符数：

0/200
<script setup lang="ts">
const comment = ref('')
</script>

<template>
  <MWithCharacterLimit v-model="comment" :max-length="200" placeholder="最多 200 字..." />
</template>

带图标

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

0/100
<script setup lang="ts">
const message = ref('')
</script>

<template>
  <MWithCharacterLimit
    v-model="message"
    leading-icon="i-lucide-message-square"
    :max-length="100"
    placeholder="写下你的想法..."
  />
</template>

不同尺寸

支持多种尺寸：

0/30
0/50
0/80
<script setup lang="ts">
const textSm = ref('')
const textMd = ref('')
const textLg = ref('')
</script>

<template>
  <div class="space-y-4 flex flex-col">
    <MWithCharacterLimit
      v-model="textSm"
      size="sm"
      :max-length="30"
      placeholder="Small"
    />

    <MWithCharacterLimit
      v-model="textMd"
      size="md"
      :max-length="50"
      placeholder="Medium"
    />

    <MWithCharacterLimit
      v-model="textLg"
      size="lg"
      :max-length="80"
      placeholder="Large"
    />
  </div>
</template>

自定义计数器样式

通过 counterClass 自定义计数器样式：

0/100
<script setup lang="ts">
const content = ref('')
</script>

<template>
  <MWithCharacterLimit
    v-model="content"
    :max-length="100"
    counter-class="text-primary font-semibold"
    placeholder="自定义计数器颜色"
  />
</template>

表单场景

在表单字段中限制输入长度：

2-20 个字符
0/20
不超过 140 字
0/140
<script setup lang="ts">
const form = reactive({
  username: '',
  bio: ''
})
</script>

<template>
  <div class="space-y-4">
    <UFormField label="用户名" hint="2-20 个字符">
      <MWithCharacterLimit v-model="form.username" :max-length="20" placeholder="请输入用户名" />
    </UFormField>

    <UFormField label="个人简介" hint="不超过 140 字">
      <MWithCharacterLimit v-model="form.bio" :max-length="140" placeholder="介绍一下自己..." />
    </UFormField>
  </div>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

maxLength50number

Maximum number of characters allowed

counterClassstring | false | 0 | 0n | ClassNameArray

Custom class for the character counter

idstring
namestring
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 & {}
placeholderstring

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"
autocompletestring & {} | "on" | "off"
autofocusDelaynumber
defaultValueT
modelModifiersModelModifiers
iconany

Display an icon based on the leading and trailing props.

avatarAvatarProps

Display an avatar on the left side.

leadingIconany

Display an icon on the left side.

trailingIconany

Display an icon on the right side.

loadingIconappConfig.ui.icons.loadingany

The icon when the loading prop is true.

liststring
maxstring | number
maxlengthstring | number
minstring | number
minlengthstring | number
patternstring
readonlyfalse | true | "true" | "false"
stepstring | number
modelValueT
requiredboolean
autofocusboolean
disabledboolean
highlightboolean

Highlight the ring color like a focus state.

fixedboolean

Keep the mobile text size on all breakpoints.

leadingboolean

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

trailingboolean

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

loadingboolean

When true, the loading icon will be displayed.

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]

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

Changelog

Soon
  • 0767b — refactor(input): 使用 withDefaults 统一 WithCharacterLimit 的默认值处理
  • 29974 — chore: 升级依赖并修复类型问题
  • 30ead — refactor: 重组项目结构以提升可维护性
v0.1.0
  • d4a6c — refactor: 将组件 Props 类型定义提取到独立文件
  • 9bdda — refactor(components): 优化组件代码格式
  • e49b2 — ♻️ refactor: 为输入增强组件添加泛型类型支持
  • 0151f — ✨ feat: 新增输入增强组件 WithCopy 和 WithCharacterLimit

ThemePicker

可视化主题配置组件

WithClear

带清除按钮的输入框组件

Copyright © 2025 - 2026 YiXuan - MIT License