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>
  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>

更详细代码可以参考 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，不需要可以不使用

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/