lc-searchbar

搜索栏组件

注意事项

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

效果

使用方法

<template>
  <div class="wxc-demo">
    <scroller class="scroller">
      <div class="wrapper">
        <title title="lc-searchbar"></title>
        <category title="使用案例"></category>
      </div>
      <text class="value-text"
            @click="setValue">点我可设置输入框内容</text>
      <div class="demo">
        <lc-searchbar ref="lc-searchbar" cancelColor="red"
                       @LcSearchbarCancelClicked="LcSearchbarCancelClicked"
                       @LcSearchbarInputReturned="LcSearchbarInputReturned"
                       @LcSearchbarInputOnInput="LcSearchbarInputOnInput"
                       @LcSearchbarCloseClicked="LcSearchbarCloseClicked"
                       @LcSearchbarInputOnFocus="LcSearchbarInputOnFocus"
                       @LcSearchbarInputOnBlur="LcSearchbarInputOnBlur"></lc-searchbar>
        <text class="value-text">{{value}}</text>

      </div>

      <text class="hint">禁用输入框</text>
      <div class="demo demo1">
        <lc-searchbar :disabled="isDisabled"
                       placeholder="无法输入"
                       @LcSearchbarInputDisabledClicked="LcSearchbarInputDisabledClicked"></lc-searchbar>
      </div>

      <text class="hint">一直显示取消按钮,同时theme="yellow"</text>
      <div class="demo demo1">
        <lc-searchbar :always-show-cancel="showCancel"
                       theme="yellow"
                       @searchbarCancelClick="searchbarCancelClick"></lc-searchbar>
      </div>

      <text class="hint">带有目的地模式的输入框、theme="yellow"</text>
      <div class="demo demo1">
        <lc-searchbar class="searchbar"
                       placeholder="搜索目的地"
                       theme="yellow"
                       mod="hasDep"
                       dep-name="杭州出发"
                       @LcSearchbarDepChooseClicked="LcSearchbarDepChooseClicked"
                       @LcSearchbarInputDisabledClicked="LcSearchbarInputDisabledClicked"></lc-searchbar>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
  .wxc-demo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #F6F9F8;
  }

  .scroller {
    flex: 1;
  }

  .wrapper {
    background-color: #FFFFFF;
  }

  .demo {
    height: 160px;
  }

  .demo1 {
    margin-top: 20px;
  }

  .value-text {
    margin: 24px;
    font-size: 30px;
    color: #333;
  }

  .hint {
    margin-left: 24px;
    font-size: 30px;
    color: #333;
  }
</style>

<script>
  import Light from 'light';
  const modal = Light.requireModule('modal');
  import Title from 'lighting-ui/packages/_mods/title.vue';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import LcSearchbar  from 'lighting-ui/packages/lc-searchbar';

  export default {
    components: { Title, Category, LcSearchbar },
    data: () => ({
      value: '',
      showCancel: true,
      isDisabled: true
    }),
    methods: {
      setValue () {
        this.$refs['lc-searchbar'].setValue('点击了手动设置输入框内容的开关');
      },

      LcSearchbarInputOnFocus () {
        modal.toast({ 'message': 'onfocus', 'duration': 1 });
      },
      LcSearchbarInputReturned(){
        modal.toast({ 'message': 'Returned', 'duration': 1 });
      },
      LcSearchbarInputOnBlur () {
        modal.toast({ 'message': 'onbulr', 'duration': 1 });
      },
      LcSearchbarCloseClicked () {
        modal.toast({ 'message': 'close.click', 'duration': 1 });
      },
      LcSearchbarInputOnInput (e) {
        this.value = e.value;
      },
      LcSearchbarCancelClicked () {
        modal.toast({ 'message': 'cancel.click', 'duration': 1 });
      },
      LcSearchbarInputDisabledClicked () {
        modal.toast({ 'message': 'input.onclick', 'duration': 1 });
      },
      LcSearchbarDepChooseClicked () {
        modal.toast({ 'message': 'dep.choose.click', 'duration': 1 });
      },
      searchbarCancelClick(){
        modal.toast({ 'message': 'CancelClick', 'duration': 1 });
      }
    }
  };
</script>

可配置参数

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
autofocus	Boolean	N	false	是否在页面加载时控件自动获得输入焦点
default-value	String	N	-	默认值
disabled	Boolean	N	false	是否禁用
returnKeyType	String	N	default	键盘返回键的类型
always-show-cancel	Boolean	N	false	是否一直显示取消按钮
dep-name	String	N	杭州	mode="hasDep"时需要设置出发地名称
theme	String	N	gray	输入框的色值主题gray/yellow`
cancelColor	String	N	#000000	取消按钮的颜色

事件回调

// 具体使用可以参考上述demo，不需要可以不使用

Api 模式

• 支持外部Api形式设置value，通过调用setValue，传入对应值即可
• 通过调用autoBlur可以主动使输入框失去焦点