SearchBar 搜索框

搜索栏。

扫码体验：
SearchBar 搜索框 - 图1

属性名描述类型默认值必选
value搜索框的当前值Stringfalse
placeholderplaceholderStringfalse
focus自动获取光标Booleanfalsefalse
onInput键盘输入时触发(value: String) => voidfalse
onClear点击 clear 图标触发(val: String) => voidfalse
onFocus获取焦点时触发() => voidfalse
onBlur失去焦点时触发() => voidfalse
onCancel点击取消时触发() => voidfalse
onSubmit点击键盘的 enter 时触发(val: String) => voidfalse
disabled设置禁用Booleanfalse
maxLength最多允许输入的字符个数Numberfalse
showCancelButton是否一直显示取消按钮Booleanfalse

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents": {
  4.     "search-bar": "mini-antui/es/search-bar/index"
  5.   }
  6. }
  1. <view>
  2.   <search-bar
  3.     value="{{value}}"
  4.     placeholder="搜索"
  5.     onInput="handleInput"
  6.     onClear="handleClear"
  7.     onFocus="handleFocus"
  8.     onBlur="handleBlur"
  9.     onCancel="handleCancel"
  10.     onSubmit="handleSubmit"
  11.     showCancelButton="{{false}}" />
  12. </view>
  1. Page({
  2.   data: {
  3.     value: '美食',
  4.   },
  5.   handleInput(value) {
  6.     this.setData({
  7.       value,
  8.     });
  9.   },
  10.   handleClear(value) {
  11.     this.setData({
  12.       value: '',
  13.     });
  14.   },
  15.   handleFocus() {},
  16.   handleBlur() {},
  17.   handleCancel() {
  18.     this.setData({
  19.       value: '',
  20.     });
  21.   },
  22.   handleSubmit(value) {
  23.     my.alert({
  24.       content: value,
  25.     });
  26.   },
  27. });

原文: https://docs.alipay.com/mini/component-ext/search-bar