搜索框 (bui-searchbar)

框架提供两个搜索框布局，一个是搜索位于中间布局 bui-searchbar-center ，一个是搜索位于左边布局 bui-searchbar-left。

搜索框(bui-search) - 图1   搜索框(bui-search) - 图2

用法

  1. <bui-searchbar-center  placeholder="请输入关键字" @search="onSearch"></bui-searchbar-center>
  3. <bui-searchbar-left @search="onSearch" :autofocus=true></bui-searchbar-left>
  1. onSearch(value){
  2.     this.$toast(value);
  3. }

Example: bui-searchbar

属性

Prop Type Required Default Description
placeholder string N 请输入搜索内容 输入提示内容
value string N 输入框文本
autofocus boolean N false 自动聚焦

事件

  • @focus 是搜索框组件获得输入焦点时候的事件
  • @blur 是搜索框失去输入焦点时候的事件
  • @clear 是清除搜索框内容时触发的事件
  • @search 是搜索框点击搜索按钮后触发的事件