lighting-ui
Version:
A rich interaction, lightweight, high performance UI library based on Weex
107 lines (89 loc) • 3.5 kB
Markdown
# lc-searchbar
> Search bar
### Rule
- Under the navigation bar.
- Exit the activation state with the `cancel button`
## [Demo](https://h5.m.taobao.com/trip/lc-searchbar/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Flc-searchbar%2Fdemo%2Findex.native-min.js)
<img src="https://gw.alipayobjects.com/zos/rmsportal/qbEmYUETsvpDKuloPFfu.gif" width="240"/> <img src="https://img.alicdn.com/tfs/TB10KfVSpXXXXaRXVXXXXXXXXXX-200-200.png" width="160"/>
## Code Example
```vue
<template>
<div class="container">
<div class="demo">
<text class="value-text">base search bar</text>
<lc-searchbar ref="lc-searchbar"
="LcSearchbarCancelClicked"
="LcSearchbarInputReturned"
="LcSearchbarInputOnInput"
="LcSearchbarCloseClicked"
="LcSearchbarInputOnFocus"
="LcSearchbarInputOnBlur"></lc-searchbar>
<text class="value-text">{{value}}</text>
</div>
<div class="demo demo1">
<text class="value-text">input disabled</text>
<lc-searchbar disabled="true" ="searchbarInputDisabledOnclick"></lc-searchbar>
</div>
<div class="demo demo1">
<text class="value-text">has dep</text>
<lc-searchbar disabled="true"
placeholder="type to search"
mod="hasDep"
dep-name="hangzhou"
="LcSearchbarDepChooseClicked"
="LcSearchbarInputDisabledClicked"></lc-searchbar>
</div>
</div>
</template>
<script>
import { LcSearchbar } from 'weex-ui'
export default {
components: { LcSearchbar },
data: () => ({
value: ''
}),
methods: {
LcSearchbarInputOnFocus () {
},
LcSearchbarInputOnBlur () {
},
LcSearchbarInputReturned (){
},
LcSearchbarCloseClicked () {
},
LcSearchbarInputOnInput (e) {
this.value = e.value;
},
LcSearchbarCancelClicked () {
},
LcSearchbarInputDisabledClicked () {
},
LcSearchbarDepChooseClicked () {
}
}
};
</script>
```
More details can be found in [here](https://github.com/alibaba/weex-ui/blob/master/example/searchbar/index.vue)
### API
| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| mod | `String` |`N`| `default` | search bar mode `default`/`hasDep` |
| placeholder | `String` |`N`| `搜索` | input placeholder|
| input-type | `String` |`N`| `text` | `text，password，url，email，tel`|
| autofocus | `Boolean` |`N`| `false` | input auto focus |
| default-value | `String` |`N`| `-` | default value |
| disabled | `Boolean` |`N`| `false` | whether is been disabled|
| always-show-cancel | `Boolean` |`N`| `false` | whether to show cancel button |
| dep-name | `String` |`N`| `杭州` | dep name when `mode="hasDep"` |
| theme | `String` |`N`| `gray` | search bar theme `gray`/`yellow` |
### Event
```
// Specific use can refer to the above demo, do not need to be able to not use.
```
### Manual
```
<lc-searchbar ref="LcSearchbar"></lc-searchbar>
// this.$refs.LcSearchbar.setValue("SET");
// this.$refs.LcSearchbar.autoBlur();
```