Weex 搜索栏组件
<template> <div class="container"> <div class="demo"> <text class="value-text">基础输入框</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">输入框禁用</text> <wxc-searchbar disabled="true" @wxcSearchbarInputDisabledClicked="searchbarInputDisabledOnclick"></wxc-searchbar> </div> <div class="demo demo1"> <text class="value-text">带有目的地模式的输入框</text> <wxc-searchbar disabled="true" placeholder="搜索目的地" mod="hasDep" dep-name="杭州出发" @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>
更详细代码可以参考 demo
Prop | Type | Required | Default | Description |
---|---|---|---|---|
mod | String | N | default | 搜索框样式 default(默认) /hasDep(带出发地) |
placeholder | String | N | 搜索 | input placeholder |
input-type | String | N | text | text,password,url,email,tel |
return-key-type | String | N | default | 键盘返回键的类型 default/go/next/search/send/done |
cancel-label | String | N | 取消 | 右侧按钮文案 |
autofocus | Boolean | N | false | 是否在页面加载时控件自动获得输入焦点 |
default-value | String | N | - | 默认值 |
disabled | Boolean | N | false | 是否禁用 |
always-show-cancel | Boolean | N | false | 是否一直显示取消按钮 |
dep-name | String | N | 杭州 | mode="hasDep" 时需要设置出发地名称 |
theme | String | N | gray | 输入框的色值主题 gray /yellow |
bar-style | Object | N | {} | 当theme 配置不满足时候使用bar-style 样式进行覆盖 |
// 具体使用可以参考上述demo,不需要可以不使用