Search 搜索框

参考 TDesign search 示例，支持结果预览、字数限制、焦点操作按钮与形状切换。

搜索框组件，用于内容检索，支持清除、操作按钮和不同形状

演示

9:41

代码示例

<!-- 基础搜索框 -->
  <re-search class="demo-default" placeholder="搜索预设文案" :value="defaultValue" @update:value="defaultValue = $event" />
  <re-search class="demo-result" placeholder="输入 tdesign，有预览结果" :value="resultValue" :resultList="resultList" @update:value="resultValue = $event" @change="onResultChange" />

<!-- 字数限制 -->
  <re-search class="demo-maxlength" placeholder="最大输入10个字符" :value="maxlengthValue" :maxlength="10" @update:value="maxlengthValue = $event" />
  <re-search class="demo-maxcharacter" placeholder="最大输入10个字符，汉字算两个" :value="maxcharacterValue" :maxcharacter="10" @update:value="maxcharacterValue = $event" />

<!-- 获取焦点后显示取消按钮 -->
  <re-search class="demo-action" center placeholder="搜索预设文案" :value="actionValue" :actionText="actionText" @update:value="actionValue = $event" @focus="actionText = '取消'" @blur="onActionBlur" @actionClick="onActionClick" />

<!-- 搜索框形状 -->
  <re-search class="demo-square" placeholder="搜索预设文案" :value="squareValue" @update:value="squareValue = $event" />
  <re-search class="demo-round" placeholder="搜索预设文案" shape="round" :value="roundValue" @update:value="roundValue = $event" />

<!-- 默认状态与居中样式 -->
  <re-search class="demo-center" center placeholder="搜索预设文案" :value="centerValue" @update:value="centerValue = $event" />
  <re-search class="demo-disabled" :disabled="true" value="禁用状态" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-search />。

API

Search Props

名称	类型	默认值	描述	必传
value	`string \| number`	""	输入框的值	N
placeholder	`string`	"请输入搜索内容"	占位提示文字	N
shape	`string`	"square"	形状，可选值：square / round	N
clearable	`boolean`	true	是否可清除	N
disabled	`boolean`	false	是否禁用	N
leftIcon	`string`	""	左侧图标文字（如 "🔍"）	N
actionText	`string`	""	操作按钮文字，为空时不显示	N
resultList	`Array<string>`		预览结果列表	N
center	`boolean`	false	是否居中显示文字	N
maxlength	`number`	-1	最大输入长度	N
maxcharacter	`number`	0	最大字符数，一个中文按两个字符计算	N
readonly	`boolean`	false	是否只读	N
customStyle	`string`	""	自定义样式	N

Search Events

名称	参数	描述
change	value: string	值变化时触发
focus	-	聚焦时触发
blur	-	失焦时触发
clear	-	清除时触发
submit	value: string	提交（按下搜索键）时触发
actionClick	-	点击操作按钮时触发
update:value	value: string	点击操作按钮时触发

Search Slots

名称	描述
-	-

Rate 评分

星级评价组件，支持半星选择、自定义文案和只读

ShortPassword 短密码

网格状密码输入，常用于支付密码，支持自定义长度和提示

内容锚点

演示
代码示例
引入
API