@mas.io/adc-search

安装

tnpm install --save @alipay/adc-search

组件介绍

用于搜索场景的输入框组件。

参数说明

属性	必填	参数类型	参数说明	默认值	示例
className	否	string	自定义样式	''	'.search-inp'
value	否	string	搜索框input的value	''	ABC
placeholder	否	string	搜索框placeholder	请输入	请输入内容
bgColor	否	string	搜索框的背景色	#fff	#000
color	否	string	搜索框字体颜色	#999	#000
height	否	string	搜索框高度	58rpx	30px
focus	否	boolean	搜索框获取焦点	false	true
controlled	否	boolean	组件受控模式，若想通过value值改变input框的值，一定要设置为true	false	true
textAlign	否	string	对齐方式	center	left
borderColor	否	string	搜索框线条颜色	#f1f1f1	#000
focusBorderColor	否	string	获得焦点时搜索框线条颜色	''	#000
borderRadius	否	string	搜索框圆角	150rpx	10rpx
hideClearBtn	否	boolean	是否隐藏清除按钮	false	true
customIcon	否	string	icon	search	am-icon图标
iconColor	否	string	icon颜色	#dbdbdb	#000
iconSize	否	number	icon大小	16	18
iconPos	否	string	icon位置	right	left
disabled	否	boolean	是否禁用	false	true
onInputConfirm	否	Function	确定搜索时触发	null	()=>{}
onInputFocus	否	Function	输入框获得焦点时触发	null	()=>{}
onClearInput	否	Function	点击清除按钮后触发	null	()=>{}
onInputChange	否	Function	输入框内容变化时触发	null	()=>{}
onInputBlur	否	Function	输入框失去焦点时触发	null	()=>{}

在小程序中使用

{
  "usingComponents": {
    "mas-adc-search": "@alipay/adc-search/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
 <view class="search">
   <adc-search bgColor="#fff" textAlign="left" placeholder="请输入内容" onClearInput="onClearInput"
               onInputFocus="onInputFocus" onInputConfirm="onInputConfirm" onInputChange="onInputChange"/>
 </view>

Badges

[![install size][install-size-image]][install-size-url]

---