1.0.4 • Published 3 years ago
@mas.io/adc-search v1.0.4
安装
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
