组件
输入
显示一个输入框。
用法
使用 v-model 使输入框响应式。
<script setup lang="ts">
const value = ref('')
</script>
<template>
<UInput v-model="value" />
</template>
样式
使用 color 和 variant 属性更改输入框的视觉样式。
<template>
<UInput color="primary" variant="outline" placeholder="Search..." />
</template>
除了 ui.colors 对象中的所有颜色，你还可以使用 white（默认）和 gray 颜色及其预定义的变体。
白色
<template>
<UInput color="white" variant="outline" placeholder="Search..." />
</template>
灰色
<template>
<UInput color="gray" variant="outline" placeholder="Search..." />
</template>
尺寸
使用 size 属性更改输入框的尺寸。
<template>
<UInput size="sm" />
</template>
类型
使用 type 属性更改输入框的类型，默认 type 设置为 text，你可以查看 MDN 上所有可用的类型。
某些类型已在自己的组件中实现，例如 复选框，单选按钮 等，其他一些则像 file 一样被进行了样式设置。
<template>
<UInput type="file" size="sm" icon="i-heroicons-folder" />
</template>
占位符
使用 placeholder 属性设置占位符文本。
<template>
<UInput placeholder="Search..." />
</template>
图标
使用 Iconify 中的任何图标，通过 icon 属性设置，使用以下模式：i-{collection_name}-{icon_name}。
使用 leading 和 trailing 属性设置图标位置，或使用 leading-icon 和 trailing-icon 属性为每个位置设置不同的图标。
<template>
<UInput
icon="i-heroicons-magnifying-glass-20-solid"
size="sm"
color="white"
:trailing="false"
placeholder="Search..."
/>
</template>
禁用
使用 disabled 属性禁用输入框。
<template>
<UInput disabled placeholder="Search..." />
</template>
加载中
使用 loading 属性显示加载图标并禁用输入框。
使用 loading-icon 属性设置不同的图标，或在 ui.input.default.loadingIcon 中全局更改它。默认值为 i-heroicons-arrow-path-20-solid。
<template>
<UInput
loading
icon="i-heroicons-magnifying-glass-20-solid"
placeholder="Searching..."
/>
</template>
填充
使用 padded 属性移除输入框的填充。
<template>
<UInput
:padded="false"
placeholder="Search..."
variant="none"
class="w-full"
/>
</template>
插槽
前置
使用 #leading 插槽设置前置图标的内容。
<template>
<UInput placeholder="Search...">
<template #leading>
<UAvatar
src="https://avatars.githubusercontent.com/u/739984?v=4"
size="2xs"
/>
</template>
</UInput>
</template>
尾部
使用 #trailing 插槽设置后置图标的内容。
欧元
<template>
<UInput placeholder="Search...">
<template #trailing>
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
</template>
</UInput>
</template>
例如，你可以在 trailing 插槽中插入一个 按钮，当输入一些文本时显示它，从而创建一个可清除的输入框。
<template>
<UInput
v-model="q"
name="q"
placeholder="Search..."
icon="i-heroicons-magnifying-glass-20-solid"
autocomplete="off"
:ui="{ icon: { trailing: { pointer: '' } } }"
>
<template #trailing>
<UButton
v-show="q !== ''"
color="gray"
variant="link"
icon="i-heroicons-x-mark-20-solid"
:padded="false"
@click="q = ''"
/>
</template>
</UInput>
</template>
<script setup lang="ts">
const q = ref('')
</script>
由于前置和后置图标被包裹在一个
pointer-events-none 类中，如果你在插槽中插入一个可点击元素，你需要通过向输入框添加 :ui="{ icon: { trailing: { pointer: '' } } }" 来移除这个类，使其可点击。属性
名称
字符串
空类型
字符串
"文本"尺寸
输入框尺寸
空"md""2xs""xs""sm""lg""xl"颜色
字符串
config.default.color图标
字符串
空ui
{ wrapper?: string; base?: string; form?: string; rounded?: string; placeholder?: string; file?: DeepPartial<{ base: string; }, any>; size?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; ... 7 more ...; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}id
字符串
空modelValue
字符串 | 数字
""inputClass
字符串
空变体
输入框变体
config.default.variant"outline""none"占位符
字符串
空自动聚焦延迟
数字
100加载图标
字符串
config.default.loadingIcon前置图标
字符串
空后置图标
字符串
空模型修饰符
{ trim?: boolean; lazy?: boolean; number?: boolean; nullify?: boolean; }
{}必需
布尔值
false禁用
布尔值
false前置
布尔值
false尾部
布尔值
false自动聚焦
布尔值
false加载中
布尔值
false填充
布尔值
true配置
{
wrapper: 'relative',
base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
form: 'form-input',
rounded: 'rounded-md',
placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
file: {
base: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:bg-transparent file:border-0 file:p-0 file:outline-none'
},
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base'
},
gap: {
'2xs': 'gap-x-1',
xs: 'gap-x-1.5',
sm: 'gap-x-1.5',
md: 'gap-x-2',
lg: 'gap-x-2.5',
xl: 'gap-x-2.5'
},
padding: {
'2xs': 'px-2 py-1',
xs: 'px-2.5 py-1.5',
sm: 'px-2.5 py-1.5',
md: 'px-3 py-2',
lg: 'px-3.5 py-2.5',
xl: 'px-3.5 py-2.5'
},
leading: {
padding: {
'2xs': 'ps-7',
xs: 'ps-8',
sm: 'ps-9',
md: 'ps-10',
lg: 'ps-11',
xl: 'ps-12'
}
},
trailing: {
padding: {
'2xs': 'pe-7',
xs: 'pe-8',
sm: 'pe-9',
md: 'pe-10',
lg: 'pe-11',
xl: 'pe-12'
}
},
color: {
white: {
outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
},
gray: {
outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
}
},
variant: {
outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
none: 'bg-transparent focus:ring-0 focus:shadow-none'
},
icon: {
base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
color: 'text-{color}-500 dark:text-{color}-400',
loading: 'animate-spin',
size: {
'2xs': 'h-4 w-4',
xs: 'h-4 w-4',
sm: 'h-5 w-5',
md: 'h-5 w-5',
lg: 'h-5 w-5',
xl: 'h-6 w-6'
},
leading: {
wrapper: 'absolute inset-y-0 start-0 flex items-center',
pointer: 'pointer-events-none',
padding: {
'2xs': 'px-2',
xs: 'px-2.5',
sm: 'px-2.5',
md: 'px-3',
lg: 'px-3.5',
xl: 'px-3.5'
}
},
trailing: {
wrapper: 'absolute inset-y-0 end-0 flex items-center',
pointer: 'pointer-events-none',
padding: {
'2xs': 'px-2',
xs: 'px-2.5',
sm: 'px-2.5',
md: 'px-3',
lg: 'px-3.5',
xl: 'px-3.5'
}
}
},
default: {
size: 'sm',
color: 'white',
variant: 'outline',
loadingIcon: 'i-heroicons-arrow-path-20-solid'
}
}