Searchbar

搜索条

表单组件 / SearchBar搜索条组件

搜索组件, 一般是放在Header组件的Toolbar组件中, 当然也可以放置在任何位置

如何引入

// 引入
import { Searchbar } from 'vimo'
// 安装
Vue.component(Searchbar.name, Searchbar)
// 或者
export default{
  components: {
   Searchbar
 }
}
源码:

传入属性 / Props:

Name Type Attributes Default Description
color String <optional>
 颜色
mode String <optional>
 'ios' 模式
cancelButtonText String <optional>
 'Cancel' 取消按钮的文本
showCancelButton Boolean <optional>
 false 是否显示cancelButton(只在focus状态才显示cancelBtn, 且cancelBtn只对组件作用, 如果要赋予业务能力, 请在右侧自己实现cancelBtn)
debounce Number <optional>
 0 等待多久触发onInput事件
placeholder String <optional>
 'Search' 设置placeholder的值.
autocomplete String <optional>
 自动完成
autocorrect String <optional>
 自动纠错
autofocus String | Boolean <optional>
 如果是boolean类型, 则立即判断, 如果是Number, 则等待dom完毕定时后自动focus
spellcheck Boolean <optional>
 拼写检查
type String <optional>
 'search' 设置input配型, 可以是: "text", "password", "email", "number", "search", "tel", "url".
animated Boolean <optional>
 false 是否启动点击动画

对外事件 / Fires:

用法 / Usages

<template>
   <Page>
   <Header>
       <Navbar>
           <Title>Searchbar</Title>
       </Navbar>
       <Toolbar>
           <Searchbar :animated="true"
               placeholder="Search"
               :debounce="0"
               v-model="myInput"
               :showCancelButton="true"
               cancelButtonText="取消"

方法 / Methods

(inner) setFocus()

源码:

手动设置当前input的focus状态

事件 / Events

onBlur

源码:
属性 / Properties:
Name Type Description
$event object

事件对象

blur事件

onCancel

源码:
属性 / Properties:
Name Type Description
$event object

事件对象

cancel事件

onClear

源码:
属性 / Properties:
Name Type Description
$event object

事件对象

clear事件

onFocus

源码:
属性 / Properties:
Name Type Description
$event object

事件对象

focus事件

onInput

源码:
属性 / Properties:
Name Type Description
$event object

事件对象

input事件