全部产品
云市场
云游戏

搜索框(SearchBar)

更新时间:2019-09-09 14:07:33

本文介绍搜索框(SearchBar)。

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

代码示例

  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. });