SearchBar 搜索栏

使用指南

一般可位于 NavBar 下方，通过『取消按钮』退出激活状态。

• 应该在 placeholder 里提供提示文字，提醒用户输入相关内容。
• 在搜索栏下方，可提供有用的标签文案，帮助用户通过点击直接完成输入，比如：列出一些最近搜索的关键词。

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      Normal
    </p>
    <h3-search-bar v-model="value" :maxlength="maxlength" />
    <br />
    <h3-button @click="setValue">
      赋值
    </h3-button>
    <p class="sub-title">
      disabled
    </p>
    <h3-search-bar disabled />
    <p class="sub-title">
      Focus by operation
    </p>
    <h3-search-bar ref="manualFocusInst" placeholder="手动触发焦点" />
    <br />
    <h3-button @click="focusClick">
      调用实例focus() 可获取焦点
    </h3-button>
    <p class="sub-title">
      Show cancel button
    </p>
    <h3-search-bar
      v-model="value1"
      @submit="onSubmit"
      @clear="onClear"
      @focus="onFocus"
      @blur="onBlur"
      @extra="onCancel"
      @change="onChange"
      placeholder="Search"
      alway
    />
  </div>
</template>
<script>
import H3SearchBar from '@/components/h3-search-bar/';
import H3Button from '@/components/h3-button/';

export default {
  components: {
    H3SearchBar,
    H3Button,
  },
  data () {
    return {
      maxlength: 8,
      value: '',
      value1: '美食',
    };
  },
  methods: {
    onSubmit () {
      console.log('onSubmit');
    },
    onClear () {
      console.log('onClear');
    },
    onFocus () {
      console.log('onFocus');
    },
    onBlur () {
      console.log('onBlur');
    },
    onCancel () {
      this.value1 = '';
      console.log('onCancel');
    },
    onChange () {
      console.log('onChange');
    },
    focusClick () {
      this.$refs.manualFocusInst.focus();
    },
    setValue () {
      this.value = '1';
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

通过对搜索栏组件梳理，进行重构及统一弹出风格及UI。若要做迁移请参考

1. 弃用的props：defaultValue onSubmit onChange onFocus onBlur onCancel onClear

2. 替换的props：

   • showCancelButton => always
   • maxLength => maxlength
   • cancelText => extraText
   • cancel => autoClear

3. 新增的props：wait clearable cancel

4. 新增的events：submit change focus blur extra

API

Prop

属性	说明	类型	默认值
value	搜索栏的当前值，v-model绑定值	string	-
placeholder	placeholder	string	搜索
autoClear	按钮是否默认清空内容，若prop:autoClear=true将自动清除输入框的文字	boolean	true
extraText	定制按钮的文字	string	取消
always	是否一直显示按钮	boolean	false
disabled	设置禁用	boolean	false
wait	设置change事件触发事件间隔多久触发，单位ms	number	200
clearable	是否可清除	boolean	true
maxlength	最多允许输入的字符个数	number	-

Event

事件名	说明	参数
input	v-model绑定事件	val: string
submit	submit 事件 (点击键盘的 enter)	val: string
change	change 事件的回调	val: string
focus	focus 事件的回调	evt
blur	blur 事件的回调	evt
extra	点击按钮触发	val: string

Function

• 实例方法

方法名	说明	参数
focus	使搜索栏input获取焦点	-
blur	使搜索栏input失去焦点	-