qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

SearchBar 搜索栏


可用于用户输入搜索信息

使用指南

import { AtSearchBar } from 'taro-ui-vue3'

组件依赖的样式文件(仅按需引用时需要)

@import "taro-ui-vue3/dist/style/components/search-bar.scss";

一般用法

说明:

  • 由于微信开发者工具的问题,Input 的 placeholder 在 value 存在的情况下,会出现重叠,在真机上不会出现此问题,可以忽略

  • 该组件为受控组件,开发者需要通过 onChange 事件或 v-model:value 来更新 value 值变化。不使用 v-model 时,valueonChange 函数必填

  • 由于此组件是基于小程序的 Input 进行封装,该组件是原生组件,使用前请阅读使用限制

<template>
  <!-- 使用 onChange 事件更新 value 值 -->
  <AtSearchBar
    :value="value1"
    @change="onChange.bind(this, 'value1')"
    @action-click="onActionClick"
  />

  <!-- 使用 v-model:value 事件更新 value 值 -->
  <AtSearchBar
    v-model:value="value1"
    @action-click="onActionClick"
  />
</template>
<script>
export default {
  name: 'AtSearchBarDemo',
  data() {
    return {
      value1: '',
    }
  },
  methods: {
    onChange(stateName, value) {
      this[stateName] = value
    },
    onActionClick() {
      console.log('点击了搜索按钮')
    }
  }
}
</script>

自定义按钮文字和点击事件

<template>
  <AtSearchBar
    actionName='搜一下'
    :value="value2"
    @change="onChange.bind(this, 'value2')"
    @action-click="onActionClick"
  />
</template>
<script>
export default {
  name: 'AtSearchBarDemo',
  data() {
    return {
      value2: '',
    }
  },
  methods: {
    onChange(stateName, value) {
      this[stateName] = value
    },
    onActionClick() {
      console.log('点击了搜索按钮')
    }
  }
}
</script>

一直显示按钮

<template>
   <AtSearchBar
      placeholder='请输入ISBN号'
      showActionButton
      :value="value3"
      @change="onChange.bind(this, 'value3')"
      @action-click="onActionClick"
    />
</template>
<script>
export default {
  name: 'AtSearchBarDemo',
  data() {
    return {
      value3: '',
    }
  },
  methods: {
    onChange(stateName, value) {
      this[stateName] = value
    },
    onActionClick() {
      console.log('点击了搜索按钮')
    }
  }
}
</script>

自定义输入框类型

<template>
  <AtSearchBar
    placeholder='请输入数字'
    inputType='number'
    :value="value4"
    @change="onChange.bind(this, 'value4')"
    @action-click="onActionClick"
  />
</template>
<script>
export default {
  name: 'AtSearchBarDemo',
  data() {
    return {
      value4: '',
    }
  },
  methods: {
    onChange(stateName, value) {
      this[stateName] = value
    },
    onActionClick() {
      console.log('点击了搜索按钮')
    }
  }
}
</script>

参数

参数微信小程序h5说明类型可选值默认值
value必填,输入框当前值,支持 v-model,开发者可通过 onChange 事件或 v-model:value 来更新 value 值String--
placeholder占位符String--
maxLength最大长度Number-140
fixed是否固定顶部Boolean-false
focus是否聚焦Boolean-false
disabled是否禁止输入Boolean-false
showActionButton是否一直显示右侧按钮Boolean-false
actionName右侧按钮文案String-'搜索'
inputType输入框输入类型String'text', 'number', 'idcard', 'digit''text'

事件

事件名称微信小程序h5说明返回参数
onChange输入框值改变时触发的事件,开发者可通过 onChange 事件来更新 value 值变化,不使用 v-model 时,onChange 函数必填(value:string, event:Object) => void
onUpdate:value使用 v-model:value 时自动触发(value:string, event:Object) => void
onFocus输入框聚焦时触发,height 参数在基础库 1.9.90 起支持(event:Object) => void
onClear点击清除按钮时触发事件,若不传,则默认传空字符串调用 onChange 函数() => void
onBlur输入框值失去焦点时触发的事件() => void
onConfirmx点击完成按钮时触发。H5 版中目前需借用 Form 组件的onSubmit事件来替代() => void
onActionClick右侧按钮点击触发事件() => void