搜索

搜索组件。

基础使用

• 通过 v-model 绑定搜索值。
• 通过 placeholder 属性设置占位符。

<template>
	<pure-search
		v-model="searchValue"
		placeholder="请输入搜索内容"
	></pure-search>
</template>

占位符

通过 placeholder 属性设置占位符,可以是一个字符串,也可以是一个字符串数组。

• 如果是一个字符串,则显示固定的占位符。
• 如果是一个字符串数组,则显示一个上下滚动切换的占位符。

<template>
	<pure-search
		v-model="searchValue"
		:placeholder="['鞋子', '羽绒服']"
	></pure-search>
</template>

搜索按钮

通过 showBtn 属性设置是否显示搜索按钮。

<template>
	<pure-search
		v-model="searchValue"
		placeholder="请输入搜索内容"
		showBtn
	></pure-search>
</template>

可清空

通过 clearable 属性设置是否可清空搜索值。

<template>
	<pure-search
		v-model="searchValue"
		placeholder="请输入搜索内容"
		clearable
	></pure-search>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
v-model	[String, Number]		搜索内容
showIcon	Boolean	true	是否显示搜索图标
iconName	String	__search	搜索图标名称
iconOpts	Object	{}	搜索图标选项 参考
placeholder	[String, Array]		占位符
autoplay	Boolean	true	占位符是否自动播放
circular	Boolean	true	占位符是否循环播放
interval	Number	3000	占位符切换间隔时间
showBtn	Boolean	false	是否显示搜索按钮
btnText	String	搜索	搜索按钮文字
btnTheme	String	primary	搜索按钮主题
linkBtn	Boolean	false	搜索按钮是否是链接样式
btnShape	String	round	搜索按钮形状
btnOpts	Object	{}	搜索按钮选项 参考
clearable	Boolean	false	是否可清空
clearIconName	String	__clear	清除按钮图标名称
clearIconOpts	Object	{}	清除按钮图标选项 参考
disabled	Boolean	false	是否禁用
readonly	Boolean	false	是否只读
placeholderStyle	String		占位符样式 参考
placeholderClass	String	input-placeholder	占位符样式类 参考
maxlength	Number	-1	最大输入长度，设置为 -1 的时候不限制最大长度 参考
cursorSpacing	Number	0	指定光标与键盘的距离 参考
focus	Boolean	false	获取焦点 参考
confirmHold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起 参考
cursor	Number		指定 focus 时的光标位置 参考
cursorColor	String		光标颜色 参考
selectionStart	Number	-1	光标起始位置 参考
selectionEnd	Number	-1	光标结束位置 参考
adjustPosition	Boolean	true	键盘弹起时，是否自动上推页面 参考
autoBlur	Boolean	false	键盘收起时，是否自动失去焦点 参考
ignoreCompositionEvent	Boolean	false	是否忽略组件内对文本合成系统事件的处理 参考
alwaysEmbed	Boolean	false	强制输入框处于同层状态 参考
holdKeyboard	Boolean	false	focus 时，点击页面的时候不收起键盘 参考
controlled	Boolean	false	是否为受控组件 参考
alwaysSystem	Boolean	false	是否强制使用系统键盘和 Web-view 创建的 input 元素 参考
inputmode	String	text	是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示 参考

事件

名称	参数	说明
onClick		点击事件
onInput	event	输入事件 参考
onFocus	event	聚焦事件 参考
onBlur	event	失焦事件 参考
onConfirm	searchText: 搜索内容, placeholderText: 占位符内容	确认事件 参考
onKeyboardHeightChange	event	键盘高度变化事件 参考
onClear		清空事件

插槽

名称	参数	说明
#icon		搜索图标
#right		右侧内容

样式变量

名称	说明
--pure-search-border-radius	圆角大小
--pure-search-height	高度
--pure-search-background	背景
--pure-search-gap	内容间距
--pure-search-padding	内边距
--pure-search-icon-font-size	搜索图标字体大小
--pure-search-icon-font-weight	搜索图标字体粗细
--pure-search-icon-color	搜索图标颜色
--pure-search-icon-margin	搜索图标外边距
--pure-search-icon-padding	搜索图标内边距
--pure-search-body-padding	搜索内容内边距
--pure-search-placeholder-color	占位符颜色
--pure-search-clear-font-size	清除图标字体大小
--pure-search-clear-font-weight	清除图标字体粗细
--pure-search-clear-color	清除图标颜色
--pure-search-clear-margin	清除图标外边距
--pure-search-clear-padding	清除图标内边距
--pure-search-button-container-width	搜索按钮容器宽度
--pure-search-button-container-padding	搜索按钮容器内边距
--pure-search-button-container-margin	搜索按钮容器外边距
--pure-search-button-font-size	搜索按钮字体大小
--pure-search-button-font-weight	搜索按钮字体粗细
--pure-search-button-color	搜索按钮颜色
--pure-search-disabled-opacity	禁用状态透明度