开发预览更新于 2026-05-10

SearchInput 搜索框

预设 search 图标 + 清空按钮 + 可选快捷键提示的输入框，按 Enter 触发搜索事件。

基础用法

左侧固定 search 图标；非空时右侧出现 × 清空按钮，点击清空并触发 clear。回车触发 search(value)。

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfSearchInput } from '@chufix-design/vue';

const q = ref('');
function handleSearch(v: string) {
  console.log('search:', v);
}
</script>
<template>
  <div style="max-width: 24rem;">
    <CfSearchInput v-model="q" placeholder="搜索文档…" @search="handleSearch" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfSearchInput } from '@chufix-design/vue';

const q = ref('');
function handleSearch(v) {
  console.log('search:', v);
}
</script>
<template>
  <div style="max-width: 24rem;">
    <CfSearchInput v-model="q" placeholder="搜索文档…" @search="handleSearch" />
  </div>
</template>

import { useState } from 'react';
import { CfSearchInput } from '@chufix-design/react';

export default function Demo() {
  const [q, setQ] = useState('');
  function handleSearch(v: string) {
    console.log('search:', v);
  }
  return (
    <>
      <div style={{ maxWidth: "24rem" }}>
          <CfSearchInput value={q} onChange={setQ} placeholder="搜索文档…" onSearch={handleSearch} />
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfSearchInput } from '@chufix-design/react';

export default function Demo() {
  const [q, setQ] = useState('');
  function handleSearch(v) {
    console.log('search:', v);
  }
  return (
    <>
      <div style={{ maxWidth: "24rem" }}>
          <CfSearchInput value={q} onChange={setQ} placeholder="搜索文档…" onSearch={handleSearch} />
        </div>
    </>
  );
}

快捷键提示

shortcut 在最右挂一个 kbd 提示文本。常配合页面级监听 Ctrl K / ⌘K 跳到搜索框。

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfSearchInput } from '@chufix-design/vue';

const q = ref('');
</script>
<template>
  <div style="max-width: 24rem;">
    <CfSearchInput v-model="q" placeholder="按 Ctrl K 聚焦" shortcut="Ctrl K" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfSearchInput } from '@chufix-design/vue';

const q = ref('');
</script>
<template>
  <div style="max-width: 24rem;">
    <CfSearchInput v-model="q" placeholder="按 Ctrl K 聚焦" shortcut="Ctrl K" />
  </div>
</template>

import { useState } from 'react';
import { CfSearchInput } from '@chufix-design/react';

export default function Demo() {
  const [q, setQ] = useState('');
  const [q, setQ] = useState('');
  return (
    <>
      <CfSearchInput value={q} onChange={setQ} placeholder="按 Ctrl K 聚焦" shortcut="Ctrl K" />
    </>
  );
}

import { useState } from 'react';
import { CfSearchInput } from '@chufix-design/react';

export default function Demo() {
  const [q, setQ] = useState('');
  const [q, setQ] = useState('');
  return (
    <>
      <CfSearchInput value={q} onChange={setQ} placeholder="按 Ctrl K 聚焦" shortcut="Ctrl K" />
    </>
  );
}

三档尺寸

size 与 Input / Select 一致 — sm / md（默认）/ lg。

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfSearchInput } from '@chufix-design/vue';

const a = ref('');
const b = ref('');
const c = ref('');
</script>
<template>
  <div class="demo-stack" style="max-width: 24rem;">
    <CfSearchInput v-model="a" size="sm" placeholder="size = sm" />
    <CfSearchInput v-model="b" size="md" placeholder="size = md" />
    <CfSearchInput v-model="c" size="lg" placeholder="size = lg" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfSearchInput } from '@chufix-design/vue';

const a = ref('');
const b = ref('');
const c = ref('');
</script>
<template>
  <div class="demo-stack" style="max-width: 24rem;">
    <CfSearchInput v-model="a" size="sm" placeholder="size = sm" />
    <CfSearchInput v-model="b" size="md" placeholder="size = md" />
    <CfSearchInput v-model="c" size="lg" placeholder="size = lg" />
  </div>
</template>

import { useState } from 'react';
import { CfSearchInput } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState('');
  const [a, setA] = useState('');
  const [b, setB] = useState('');
  const [b, setB] = useState('');
  const [c, setC] = useState('');
  const [c, setC] = useState('');
  return (
    <>
      <CfSearchInput value={a} onChange={setA} size="sm" />
      <CfSearchInput value={b} onChange={setB} size="md" />
      <CfSearchInput value={c} onChange={setC} size="lg" />
    </>
  );
}

import { useState } from 'react';
import { CfSearchInput } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState('');
  const [a, setA] = useState('');
  const [b, setB] = useState('');
  const [b, setB] = useState('');
  const [c, setC] = useState('');
  const [c, setC] = useState('');
  return (
    <>
      <CfSearchInput value={a} onChange={setA} size="sm" />
      <CfSearchInput value={b} onChange={setB} size="md" />
      <CfSearchInput value={c} onChange={setC} size="lg" />
    </>
  );
}

禁用

disabled 灰显且不响应点击。

背景视口

src/App.vue

<script setup lang="ts">
import { CfSearchInput } from '@chufix-design/vue';
</script>
<template>
  <div style="max-width: 24rem;">
    <CfSearchInput model-value="（已禁用）" disabled />
  </div>
</template>

<script setup>
import { CfSearchInput } from '@chufix-design/vue';
</script>
<template>
  <div style="max-width: 24rem;">
    <CfSearchInput model-value="（已禁用）" disabled />
  </div>
</template>

import { CfSearchInput } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfSearchInput value="（已禁用）" disabled />
    </>
  );
}

import { CfSearchInput } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfSearchInput value="（已禁用）" disabled />
    </>
  );
}

API

Prop	类型	默认值	说明
`modelValue` (Vue) / `value` (React)	`string`	`''`	当前值
`placeholder`	`string`	`'搜索…'`	占位提示
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	高度
`disabled`	`boolean`	`false`	禁用
`clearable`	`boolean`	`true`	显示清空按钮（值非空时）
`shortcut`	`string`	—	右侧 kbd 提示文本

Events

Vue 事件	React 回调	载荷类型	说明
`update:modelValue`	`onChange`	`string`	输入文本变化时触发
`search`	`onSearch`	`string`	按 Enter 键时触发，载荷是当前 input 值
`clear`	`onClear`	—	点击 × 清空按钮时触发；同时 modelValue 被置为空串