搜索框

文档基于搜索框v1.1.6版本

组件说明

搜索框可用于通过设定自定义事件来搜索其他组件，另外的常见使用场景是在业务系统海里数据源里进行数据检索。

效果案例

如下案例所示通过搜索框配置了简单的事件交互来控制图片和基本饼状图的显隐状态。

一、样式

在样式中可以设置组件的基本属性和全局。

1、基本属性

位置尺寸

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。

2、全局

在全局中可以配置搜索框的占位字符、防抖时间、文字、背景、描边。

占位字符

默认占位字符为"Search..."，可以按需进行修改，如下示例图所示修改为了“搜索”。

防抖时间

防止抖动，可以自定义设置单位时间内搜索事件触发会被重置，避免搜索事件被误伤触发多次。

文字

可以从缩进、提示文字和输入文字对搜索框内文字样式进行调整。

缩进	文字相对搜索框的缩进值
提示文字	默认的提示文字样式
输入文字	输入文字时的样式

如下示例所示缩进设置为30，为凸显变化，将提示文字设置为绿色，输入文字设置为粉色

背景

背景可以设置为颜色或者自定义图片两种背景方式。

如下示例图所示将背景填充方式设置为蓝色：

如下示例图所示将背景填充方式设置为一张纯色底图：

描边

可以从粗细、颜色和圆角调整搜索框“外框的样式”

粗细	搜索框“外框”的粗细
颜色	搜索框“外框”的颜色
圆角	搜索框“外框”的整体圆角值

如下示例图所示，为了凸显配置，将粗细设置为6，颜色设置为粉色，圆角值设置为52%

二、数据

组件数据格式

字段	说明
value	搜索框内搜索的目标数据

*数据格式说明

JSON数据案例

[
	{
		"value": ""
	}
]

数据配置项说明

配置项	说明
数据源	数据源类型、数据源选择等
数据过滤器	勾选启用数据过滤器，单击添加过滤器，可在设置数据源页面中配置数据过滤器，详情请参见数据过滤器使用说明
数据响应结果	展示数据请求的响应结果
自动更新	选中后可以设置数据请求时间间隔

数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项：

配置项	说明
渐隐渐显	启用是
速率	匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))
方向	动画方向
持续时间	载入动画持续时间，单位为ms
延时	载入动画延时长，单位为ms