Tantalum UI

Appearance

Return to top
On this page

SearchBar 搜索栏

注：

  • 该组件本身没有固定顶部功能，可以配合 Sticky 组件实现置顶功能。
vue
<template>
  <ta-group title="基础用法">
    <ta-search-bar />
  </ta-group>
  <ta-group title="搜索建议">
    <ta-search-bar @input="onInput" />
  </ta-group>
  <ta-group title="显示取消按钮">
    <ta-search-bar show-cancel />
  </ta-group>
  <ta-group title="设置候选项">
    <ta-search-bar :placeholders="placeholders" />
  </ta-group>
  <ta-group title="深色适配">
    <ta-search-bar class="exp-searchBar-dark-style" show-cancel ghost />
  </ta-group>
  <ta-group title="只读（readonly=true）">
    <ta-search-bar readonly :placeholders="placeholders" />
  </ta-group>
  <ta-group title="事件监听">
    <ta-search-bar
      show-cancel
      :placeholders="placeholders"
      @input="onInput2"
      @focus="onFocus"
      @blur="onBlur"
      @cancel="onCancel"
      @search="onSearch"
    >
    </ta-search-bar>
  </ta-group>
  <ta-group title="事件监听（readonly=true）">
    <ta-search-bar readonly :placeholders="placeholders" @field-click="onClick" />
  </ta-group>
</template>

<script lang="ts">
import { placeholders } from './data'
import {
  type SearchBarOnFieldClick,
  type SearchBarOnInput,
  type SearchBarOnSearch,
  showToast
} from '@/index'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ExpSearchBar',
  setup() {
    const onCancel = () => {
      showToast('取消按钮点击')
    }

    const onInput: SearchBarOnInput = (text, fn) => {
      fn(
        text
          ? 'ABCD'.split('').map(v => {
              return {
                text: `${text} ${v}`,
                tags: ['tag1', 'tag2']
              }
            })
          : []
      )
    }

    const onInput2: SearchBarOnInput = (text, fn) => {
      showToast(`输入了 ${text}`)

      onInput(text, fn)
    }

    const onSearch: SearchBarOnSearch = res => {
      console.log('search', res)
      showToast(`搜索了 ${res.text}`)
    }

    const onClick: SearchBarOnFieldClick = res => {
      console.log('field-click', res)
      showToast(`搜索词 ${res.text}`)
    }

    return {
      placeholders,
      onFocus: () => showToast('focus'),
      onBlur: () => showToast('blur'),
      onCancel,
      onInput,
      onInput2,
      onSearch,
      onClick
    }
  }
})
</script>

Import

js
import { TaSearchBar } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type {
  SearchBarSetSuggestList,
  SearchBarOnFocus,
  SearchBarOnBlur,
  SearchBarOnInput,
  SearchBarOnSearch,
  SearchBarOnFieldClick
} from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
placeholdersstring/string[]否设置候选值列表，多个时轮询显示
placeholder-intervalnumber5000否placeholder 切换时间，placeholders 有多个时生效
ghostbooleanfalse否是否开启反色模式，开始后适用于深色底色，通过 CSS 设置背景色
readonlybooleanfalse否是否只读模式，开启后主要用于搜索入口场景
maxlengthnumber100否最大长度
focusbooleanfalse否加载时是否获取焦点
show-cancelbooleanfalse否是否展示取消按钮

Events

事件描述回调函数参数TypeScript 函数
input输入值改变时触发，包括 clear 的( text: string, setSuggestList: SearchBarSetSuggestList )SearchBarOnInput
focus输入框获取焦点时触发( text: string, setSuggestList: SearchBarSetSuggestList )SearchBarOnFocus
blur输入框移出焦点时触发( text: string, setSuggestList: SearchBarSetSuggestList )SearchBarOnBlur
cancel-click取消按钮点击e: Event
field-click输入框点击，配合 readonly 使用，获取到当前候选值payload: { text: string }SearchBarOnFieldClick
search触发搜索时payload: { text: string, source: string }SearchBarOnSearch

SearchBarSetSuggestList

ts
type SearchBarSetSuggestList = (
  res: (
    | string
    | number
    | {
        text: string | number
        tags?: string[]
      }
  )[]
) => void

const suggestList = ['suggest A', 'suggest B']
// Or
const suggestList = [
  {
    text: '油烟机',
    tags: ['厨房', '电器']
  }
]