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.

maxLength50 number
counterClass'' null | string | false | 0 | 0n | ClassNameArray
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" | "success" | "info" | "warning" | "error" | "neutral"
variant'outline' "outline" | "soft" | "subtle" | "ghost" | "none"
size'md' "xs" | "sm" | "md" | "lg" | "xl"
requiredboolean
autocomplete string
autofocusboolean
autofocusDelay number
disabledboolean
highlightboolean

Highlight the ring color like a focus state.

defaultValue null | string | number | bigint | false | true
modelModifiers ModelModifiers<AcceptableValue>
iconany

Display an icon based on the leading and trailing props.

avatar AvatarProps

Display an avatar on the left side.

leadingboolean

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

leadingIconany

Display an icon on the left side.

trailingboolean

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

trailingIconany

Display an icon on the right side.

loadingboolean

When true, the loading icon will be displayed.

loadingIconappConfig.ui.icons.loadingany

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 null | string | number | bigint | false | true
ui { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; }

Emits

Event Type
update:modelValue[value: AcceptableValue]
blur[event: FocusEvent]
change[event: Event]
update:modelValue[value: AcceptableValue | undefined]

Slots

Slot Type
leading{ ui: { root: (props?: Record<string, any> | undefined) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailing: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; }
default{ ui: { root: (props?: Record<string, any> | undefined) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailing: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; }

Changelog

d4a6c — refactor: 将组件 Props 类型定义提取到独立文件

9bdda — refactor: 优化组件代码格式

e49b2 — ♻️ refactor: 为输入增强组件添加泛型类型支持

0151f — ✨ feat: 新增输入增强组件 WithCopy 和 WithCharacterLimit

ThemePicker

可视化主题配置组件

WithClear

带清除按钮的输入框组件

Copyright © 2025 - 2026 YiXuan - MIT License