water_xcx/miniprogram_npm/tdesign-miniprogram/search

title	description	spline	isComponent
Search 搜索框	用于用户输入搜索信息，并进行页面内容搜索。	form	true

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-search": "tdesign-miniprogram/search/search"
}

主题定制

CSS 变量名	说明
--td-search-icon-color	图标颜色
--td-search-label-color	左侧文本颜色
--td-search-action-color	右侧操作按钮颜色
--td-search-text-color	输入框文本颜色
--td-search-placeholder-color	输入框placeholder占位符颜色
--td-search-bg-color	输入框背景颜色
--td-search-border-color	输入框边框颜色
--td-search-focus-border-color	聚焦时输入框边框颜色

代码演示

基础搜索框

{{ base }}

状态

{{ status }}

API

Search Props

名称	类型	默认值	说明	必传
action	String / Slot	''	自定义右侧操作按钮文字	N
center	Boolean	false	是否居中	N
disabled	Boolean	false	是否禁用	N
external-classes	Array	-	组件外部样式类名，分别用于设置组件外层类名、输入框类名、输入框容器类名、右侧 cancel 文本类名、左侧图标类名、右侧图标类型。['t-class', 't-class-input', 't-class-input-container', 't-class-action','t-class-left','t-class-right']	N
focus	Boolean	false	是否聚焦	N
label	String	''	左侧文本	N
left-icon	String / Slot	'search'	左侧图标	N
placeholder	String	''	占位符	N
right-icon	String / Slot	'close'	右侧图标	N
shape	String	'square'	搜索框形状。可选项：square/round	N
value	String	''	值	N

Search Events

名称	参数	描述
action-click	({})	点击右侧操作按钮文字时触发
blur	({ value: string })	失去焦点时触发
change	({ value: string })	值发生变化时触发
clear	({ value: string })	点击清除时触发
focus	({ value: string })	聚焦时触发
submit	({ value: string })	提交时触发