WithClear
带清除按钮的输入框组件。
简介
MWithClear 是一个带有一键清除功能的输入框组件。当输入框有内容时，会在右侧显示一个清除按钮（×），点击可快速清空输入框内容。
用法
有内容时右侧自动显示清除按钮：
<script setup lang="ts">
const value = ref("张三")
</script>
<template>
<MWithClear v-model="value" />
</template>
leadingIcon 前置图标
通过 leadingIcon 为输入框添加语义化图标：
<script setup lang="ts">
const value = ref("user@example.com")
</script>
<template>
<MWithClear v-model="value" leading-icon="i-lucide-mail" />
</template>
size 尺寸
通过 size 切换输入框与清除按钮尺寸：
<script setup lang="ts">
const value = ref("内容")
</script>
<template>
<MWithClear v-model="value" size="md" />
</template>
buttonProps 清除按钮
通过 buttonProps 自定义清除按钮样式：
<script setup lang="ts">
const value = ref('一些内容')
</script>
<template>
<MWithClear v-model="value" :button-props="{ color: 'error', icon: 'i-lucide-x' }" />
</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>
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe 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 | stringThe 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 | anyDisplay an icon based on the | |
avatar | AvatarPropsDisplay an avatar on the left side. | |
leadingIcon | anyDisplay an icon on the left side. | |
trailingIcon | anyDisplay an icon on the right side. | |
loadingIcon | appConfig.ui.icons.loading | anyThe icon when the |
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 | booleanHighlight the ring color like a focus state. | |
fixed | booleanKeep the mobile text size on all breakpoints. | |
leading | booleanWhen | |
trailing | booleanWhen | |
loading | booleanWhen | |
ui | Record<string, ClassNameValue> & { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; } |
Emits
| Event | Type |
|---|---|
update:modelValue | [value: T] |
blur | [event: FocusEvent] |
change | [event: Event] |
clear | [] |
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; }; } |
Theme
app.config.ts
export default defineAppConfig({
ui: {
withClear: {
slots: {
trailing: 'pe-1'
}
}
}
})
Changelog
No recent changes