SearchBar 搜索栏
APP
PC
一般可位于 NavBar 下方,通过『取消按钮』退出激活状态。
规则
- 应该在 placeholder 里提供提示文字,提醒用户输入相关内容,比如:双11特卖。
- 在搜索栏下方,可提供有用的标签文案,帮助用户通过点击直接完成输入,比如:列出一些最近搜索的关键词。
引入方式
数字生活小程序工程中,不需要 import,直接使用组件标签即可。
import {SearchBar} from '@21cnfe/vui' Vue.component('SearchBar', SearchBar)
|
代码演示
基本用法
v-model 绑定当前值
<SearchBar v-model="test" placeholder="search" />
|
禁用状态
<SearchBar v-model="test" disabled />
|
显示取消按钮
通过添加showCancelButton一直显示取消按钮,配合 cancelText 定制取消文本以及 onCancel 回调方法实现更加丰富的功能
<SearchBar v-model="test" showCancelButton />
|
初始化自动获取光标
适用于页面初始化就获取光标进行输入
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 |