Site Logo

Movk Nuxt

WithClear

View source
带清除按钮的输入框组件

简介

MWithClear 是一个带有一键清除功能的输入框组件。当输入框有内容时，会在右侧显示一个清除按钮（×），点击可快速清空输入框内容。

基于 Nuxt UI 的 Input 组件封装

基础用法

最简单的清除功能输入框：

<script setup lang="ts">
const username = ref('张三')
</script>

<template>
  <MWithClear v-model="username" placeholder="输入用户名..." />
</template>

带图标

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

<script setup lang="ts">
const email = ref('user@example.com')
</script>

<template>
  <MWithClear v-model="email" leading-icon="i-lucide-mail" placeholder="邮箱地址" />
</template>

搜索框

常用于搜索场景，快速清除搜索关键词：

<script setup lang="ts">
const searchQuery = ref('')

watch(searchQuery, (value) => {
  console.log('搜索:', value)
})
</script>

<template>
  <MWithClear
    v-model="searchQuery"
    leading-icon="i-lucide-search"
    placeholder="搜索..."
    size="lg"
  />
</template>

清除事件

通过 @clear 事件监听清除操作：

<script setup lang="ts">
const toast = useToast()
const keyword = ref('关键词')

function handleClear() {
  toast.add({
    title: '已清除',
    description: '输入内容已清空',
    color: 'neutral'
  })
}
</script>

<template>
  <MWithClear v-model="keyword" @clear="handleClear" />
</template>

自定义按钮

通过 buttonProps 自定义清除按钮样式：

<script setup lang="ts">
const content = ref('一些内容')
</script>

<template>
  <MWithClear
    v-model="content"
    :button-props="{
      color: 'error',
      icon: 'i-lucide-x'
    }"
  />
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

buttonProps ButtonProps
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 T
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]
clear[]
update:modelValue[value: T | 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: 为输入增强组件添加泛型类型支持

7099c — ♻️ refactor: 优化输入增强组件的实现

d97ef — ♻️ refactor: 优化 AutoForm 组件架构和渲染逻辑

WithCharacterLimit

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

WithCopy

带复制功能的输入框组件

Copyright © 2025 - 2026 YiXuan - MIT License