SearchBar 搜索栏

使用指南

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

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

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
     搜索栏类型
    </p>
    <p>常规搜索 (适用于对当前页面内容搜索，并即时显示搜索结果) </p>
    <h3-search-bar v-model="value" textAlign="left"/>

    <p>独立搜索页面 (适用于需要进入单独搜索页面的场景) </p>
    <h3-search-bar
      v-model="value1"
      placeholder="Search"
      @submit="onSubmit"
      @clear="onClear"
      @focus="onFocus"
      @blur="onBlur"
      @extra="onCancel"
      @change="onChange"
    />

    <!-- <p class="sub-title">
      Normal
    </p>
    <h3-search-bar v-model="value" :maxlength="maxlength" :always="true" />
    <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"
      placeholder="Search"
      alway
      @submit="onSubmit"
      @clear="onClear"
      @focus="onFocus"
      @blur="onBlur"
      @extra="onCancel"
      @change="onChange"
    /> -->
  </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: inherit;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的SearchBar组件规范修改相关样式

新增的props: textAlign

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	-
textAlign	搜索框文字默认居中,用于独立搜索页面, 居左由于常规搜索 值有 left center	string	center

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失去焦点	-