wxc-searchbar

Weex 搜索栏组件

规则

  • 一般可位于 NavBar 下方
  • 通过"取消按钮"退出激活状态, 允许设置点击跳转，支持带出发地形式的搜索

Demo

wxc-searchbar 输入框 - 图1 wxc-searchbar 输入框 - 图2

使用方法

  1. <template>
    2.   <div class="container">
    3.     <div class="demo">
    4.       <text class="value-text">基础输入框</text>
    5.       <wxc-searchbar ref="wxc-searchbar"
    6.                      @wxcSearchbarCancelClicked="wxcSearchbarCancelClicked"
    7.                      @wxcSearchbarInputReturned="wxcSearchbarInputReturned"
    8.                      @wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"
    9.                      @wxcSearchbarCloseClicked="wxcSearchbarCloseClicked"
    10.                      @wxcSearchbarInputOnFocus="wxcSearchbarInputOnFocus"
    11.                      @wxcSearchbarInputOnBlur="wxcSearchbarInputOnBlur"></wxc-searchbar>
    12.       <text class="value-text">{{value}}</text>
    13.     </div>
    14.     <div class="demo demo1">
    15.       <text class="value-text">输入框禁用</text>
    16.       <wxc-searchbar disabled="true" @wxcSearchbarInputDisabledClicked="searchbarInputDisabledOnclick"></wxc-searchbar>
    17.     </div>
    18.     <div class="demo demo1">
    19.       <text class="value-text">带有目的地模式的输入框</text>
    20.       <wxc-searchbar disabled="true"
    21.                      placeholder="搜索目的地"
    22.                      mod="hasDep"
    23.                      dep-name="杭州出发"
    24.                      @wxcSearchbarDepChooseClicked="wxcSearchbarDepChooseClicked"
    25.                      @wxcSearchbarInputDisabledClicked="wxcSearchbarInputDisabledClicked"></wxc-searchbar>
    26.     </div>
    27.   </div>
    28. </template>
    29. <script>
    30.   31.   import { WxcSearchbar } from 'weex-ui'
    32.   export default {
    33.     components: { WxcSearchbar },
    34.     data: () => ({
    35.       value: ''
    36.     }),
    37.     methods: {
    38.       wxcSearchbarInputOnFocus () {
    39.       },
    40.       wxcSearchbarInputOnBlur () {
    41.       },
    42.       wxcSearchbarInputReturned (){
    43.       },
    44.       wxcSearchbarCloseClicked () {
    45.       },
    46.       wxcSearchbarInputOnInput (e) {
    47.         this.value = e.value;
    48.       },
    49.       wxcSearchbarCancelClicked () {
    50.       },
    51.       wxcSearchbarInputDisabledClicked () {
    52.       },
    53.       wxcSearchbarDepChooseClicked () {
    54.       }
    55.     }
    56.   };
    57. </script>Click to copy

更详细代码可以参考 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样式进行覆盖
### 事件回调
1. // 具体使用可以参考上述demo，不需要可以不使用Click to copy

Api 模式

  • 支持外部Api形式设置value，通过调用setValue，传入对应值即可,详细可见 demo
  • 通过调用autoBlur可以主动blur输入框

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-searchbar/