SearchInput 搜索框

输入关键词进行搜索的输入框。

<script setup lang="ts">
  import { ref } from 'vue'
  import { SearchInput } from '@hina-ui/vue'

  const query = ref('狼と香辛料')
</script>

<template>
  <SearchInput v-model="query" aria-label="搜索" placeholder="搜索作品" class="w-72" />
</template>

vue

用法

import { SearchInput } from '@hina-ui/vue'

搜索输入框起始处带搜索图标，有内容时末尾出现清除按钮，v-model 绑定关键词。按 Enter 发出 search 事件并附带当前值，按 Esc 清空。未声明的属性都会传给 input。

上次提交：无

<script setup lang="ts">
  import { ref } from 'vue'
  import { SearchInput, Stack, Text } from '@hina-ui/vue'

  const query = ref('')
  const submitted = ref('')
</script>

<template>
  <Stack class="w-72">
    <SearchInput
      v-model="query"
      aria-label="搜索"
      placeholder="搜索作品"
      @search="submitted = $event"
    />
    <Text tone="muted">上次提交：{{ submitted || '无' }}</Text>
  </Stack>
</template>

vue

示例

加载中

loading 把搜索图标换成加载指示器，用于展示搜索请求正在进行。

<script setup lang="ts">
  import { SearchInput } from '@hina-ui/vue'
</script>

<template>
  <SearchInput model-value="星见" loading aria-label="搜索" class="w-72" />
</template>

vue

尺寸

三档尺寸与输入框相同。

<script setup lang="ts">
  import { SearchInput, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-72">
    <SearchInput size="sm" model-value="星见" aria-label="小号" />
    <SearchInput size="md" model-value="星见" aria-label="中号" />
    <SearchInput size="lg" model-value="星见" aria-label="大号" />
  </Stack>
</template>

vue

形态

primary 带边框、背景与阴影；secondary 使用浅色背景；bare 背景透明，不绘制边框、阴影、悬停底色或容器聚焦环，尺寸与内边距仍由原有设置控制。

bare 保留禁用状态与 aria-invalid；错误信息可由 FormField 显示。附属按钮保留自身的悬停与键盘聚焦反馈。

<script setup lang="ts">
  import { SearchInput, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-xs">
    <SearchInput variant="primary" aria-label="primary" placeholder="primary" />
    <SearchInput variant="secondary" aria-label="secondary" placeholder="secondary" />
    <SearchInput variant="bare" aria-label="bare" placeholder="bare" />
  </Stack>
</template>

vue

状态

disabled 不可编辑。关闭 clearable 后不显示清除按钮。

<script setup lang="ts">
  import { SearchInput, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-72">
    <SearchInput disabled model-value="星见" aria-label="已禁用" />
    <SearchInput :clearable="false" model-value="星见" aria-label="不带清除按钮" />
  </Stack>
</template>

vue

在表单中

放进 FormField 后，标签指向输入框，错误信息由字段渲染；校验规则与提交交给 Form，回车提交与提交按钮的行为保持默认。

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, Form, FormField, SearchInput, Text } from '@hina-ui/vue'

  const schema = v.object({
    keyword: v.pipe(
      v.string('请输入关键字'),
      v.trim(),
      v.nonEmpty('请输入关键字'),
      v.minLength(2, '关键字至少 2 个字'),
    ),
  })

  const values = reactive({ keyword: '' })
  const result = ref('')

  async function search(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    result.value = (data as { keyword: string }).keyword
  }
</script>

<template>
  <Form v-slot="{ submitting }" :values="values" :rules="schema" class="w-80" @submit="search">
    <FormField name="keyword" label="搜索作品">
      <SearchInput v-model="values.keyword" placeholder="作品名或者别名" />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">搜索</Button>
    <Text v-if="result" tone="muted" size="sm">正在搜索「{{ result }}」的结果。</Text>
  </Form>
</template>

vue

行为

清除按钮只在有内容且未禁用时出现，点击后不会让输入区失焦。
Esc 只在有内容时清空，内容为空时不做处理。
悬停、聚焦与禁用的表现与 Input 相同。

API

Props

属性	类型	默认值	说明
`modelValue`	`string`	`''`	关键词
`clearable`	`boolean`	`true`	是否显示清除按钮
`loading`	`boolean`	`false`	是否显示加载指示器
`variant`	`'primary' \| 'secondary' \| 'bare'`	`'primary'`	形态
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`disabled`	`boolean`	`false`	是否禁用
`class`	`string`	—	追加至根元素的类名

事件	参数	说明
`update:modelValue`	`value: string`	关键词变化
`search`	`value: string`	按 Enter 提交搜索
`clear`	—	关键词被清空

用法

示例

加载中

尺寸

形态

状态

在表单中

行为

无障碍

API

Props