Search bar
- Under the navigation bar.
- Exit the activation state with the
cancel button
<template>
<div class="container">
<div class="demo">
<text class="value-text">base search bar</text>
<wxc-searchbar ref="wxc-searchbar"
@wxcSearchbarCancelClicked="wxcSearchbarCancelClicked"
@wxcSearchbarInputReturned="wxcSearchbarInputReturned"
@wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"
@wxcSearchbarCloseClicked="wxcSearchbarCloseClicked"
@wxcSearchbarInputOnFocus="wxcSearchbarInputOnFocus"
@wxcSearchbarInputOnBlur="wxcSearchbarInputOnBlur"></wxc-searchbar>
<text class="value-text">{{value}}</text>
</div>
<div class="demo demo1">
<text class="value-text">input disabled</text>
<wxc-searchbar disabled="true" @wxcSearchbarInputDisabledClicked="searchbarInputDisabledOnclick"></wxc-searchbar>
</div>
<div class="demo demo1">
<text class="value-text">has dep</text>
<wxc-searchbar disabled="true"
placeholder="type to search"
mod="hasDep"
dep-name="hangzhou"
@wxcSearchbarDepChooseClicked="wxcSearchbarDepChooseClicked"
@wxcSearchbarInputDisabledClicked="wxcSearchbarInputDisabledClicked"></wxc-searchbar>
</div>
</div>
</template>
<script>
import { WxcSearchbar } from 'weex-ui'
export default {
components: { WxcSearchbar },
data: () => ({
value: ''
}),
methods: {
wxcSearchbarInputOnFocus () {
},
wxcSearchbarInputOnBlur () {
},
wxcSearchbarInputReturned (){
},
wxcSearchbarCloseClicked () {
},
wxcSearchbarInputOnInput (e) {
this.value = e.value;
},
wxcSearchbarCancelClicked () {
},
wxcSearchbarInputDisabledClicked () {
},
wxcSearchbarDepChooseClicked () {
}
}
};
</script>
More details can be found in here
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锛宲assword锛寀rl锛宔mail锛宼el |
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 |
// Specific use can refer to the above demo, do not need to be able to not use.
<wxc-searchbar ref="wxcSearchbar"></wxc-searchbar>
// this.$refs.wxcSearchbar.setValue("SET");
// this.$refs.wxcSearchbar.autoBlur();