SearchBar 搜索栏 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

一般可位于 NavBar 下方，通过『取消按钮』退出激活状态。

规则

应该在 placeholder 里提供提示文字，提醒用户输入相关内容，比如：双11特卖。
在搜索栏下方，可提供有用的标签文案，帮助用户通过点击直接完成输入，比如：列出一些最近搜索的关键词。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

点击复制

import {SearchBar} from '@21cnfe/vui'  
Vue.component('SearchBar', SearchBar)

代码演示

SearchBar 搜索栏 searchBars

扫二维码查看演示效果

基本用法 v-model 绑定当前值

点击复制

<SearchBar v-model="test" placeholder="search" />

禁用状态

点击复制

<SearchBar v-model="test" disabled />

显示取消按钮通过添加showCancelButton一直显示取消按钮，配合 cancelText 定制取消文本以及 onCancel 回调方法实现更加丰富的功能

点击复制

<SearchBar v-model="test" showCancelButton />

初始化自动获取光标适用于页面初始化就获取光标进行输入

点击复制

<SearchBar autofocus />

API

属性	说明	类型	默认值
`defaultValue`	搜索框的默认值	String	`--`
`value / v-model`	搜索框的当前绑定值	String	`--`
`placeholder`	placeholder	String	`--`
`showCancelButton`	是否一直显示取消按钮	Boolean	`false`
`cancelText`	定制取消按钮的文字	String	`'取消'`
`disabled`	设置禁用	Boolean	`false`
`maxLength`	最多允许输入的字符个数	Number	`--`
`autofocus`	用于初始化自动聚焦	Boolean	`false`

Event

事件名称	说明	回调参数
`onSubmit`	submit 事件 (点击键盘的 enter)	(val: String): void
`onChange`	change 事件的回调	(val: String): void
`onFocus`	focus 事件的回调	(): void
`onBlur`	blur 事件的回调	(): void
`onCancel`	点击取消按钮触发 (不再自动清除输入框的文字)	(val: String): void
`onClear`	点击 clear 图标触发	(val: String): void

1. SearchBar 搜索栏