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.
`maxLength`	`50`	`number`
`counterClass`	`''`	`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'`	`string \| number \| symbol`
`variant`	`'outline'`	`string \| number \| symbol`
`size`	`'md'`	`string \| number \| symbol`
`autocomplete`		`string`
`autofocusDelay`		`number`
`defaultValue`		`string \| number \| bigint \| false \| true`
`modelModifiers`		`ModelModifiers<AcceptableValue>`
`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`		`string \| number \| bigint \| false \| true`
`required`		`boolean`
`autofocus`		`boolean`
`disabled`		`boolean`
`highlight`		`boolean` Highlight the ring color like a focus state.
`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`		`{ [x: string]: ClassNameValue; }`

Emits

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

Slots

Slot	Type
`leading`	`{ ui: { [x: string]: (props?: Record<string, any>) => string; }; }`
`default`	`{ ui: { [x: string]: (props?: Record<string, any>) => string; }; }`

Changelog

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

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

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

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

StarRating

交互式星级评分组件

WithClear

带清除按钮的输入框组件