安装
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]