搜索 Search

适用于搜索场景

使用

API

安装使用

import { TiSearch } from '@titian-design/mobile-vue'

用法示例

基本使用

codesanbox

copy

code

<template>
  <TiSearch placeholder="搜索" />
  <TiSearch center placeholder="搜索" />
</template>

<script lang="ts" setup>
import { TiSearch } from 'titian-h5-vue';
</script>

搜索按钮状态

属性含义：`animation` 设置关闭搜索按钮动画。`alwaysShowSearch` 设置一直显示搜索按钮。`useSearchButton` 设置不使用组件自带的搜索按钮。

codesanbox

copy

code

<template>
  <TiSearch :animation="false" />
  <TiSearch alwaysShowSearch />
  <TiSearch :useSearchButton="false" />
</template>

<script lang="ts" setup>
import { TiSearch } from 'titian-h5-vue';
</script>

使用插槽

请选择

codesanbox

copy

code

<template>
  <TiSearch>
    <div slot="prefix">
      <span>请选择</span>
      <TiIcon name="arrow-down" size="32" />
    </div>
    <TiIcon slot="right-icon" name="scan" size="32" />
  </TiSearch>
  <TiSearch>
    <div slot="prefix">
      <TiIcon name="category" size="42" />
    </div>
    <div slot="suffix">
      <TiIcon name="arrange" size="42" />
    </div>
  </TiSearch>
</template>

<script lang="ts" setup>
import { TiSearch, TiIcon } from 'titian-h5-vue';
</script>

键盘确认按钮文字

codesanbox

copy

code

<template>
  <TiSearch confirmType="done" value="完成" />
  <TiSearch confirmType="send" value="发送" />
  <TiSearch confirmType="search" value="搜索" />
  <TiSearch confirmType="next" value="下一项" />
  <TiSearch confirmType="go" value="前往" />
</template>

<script lang="ts" setup>
import { TiSearch } from 'titian-h5-vue';
</script>

TiSearch API

属性 Properties

名称	类型	必填	默认值	说明	备注
value	string	否	-	当前输入的值	-
center	boolean	否	false	输入框内容对齐方式，采用居中模式	-
placeholder	string	否	-	输入框为空时占位符	-
autofocus	boolean	否	false	获取焦点	-
disabled	boolean	否	false	输入框禁用	-
read-only	boolean	否	false	输入框只读	-
confirm-type	string	否	search	设置键盘右下角按钮的文字，仅在type='text'时生效	-
clearable	boolean	否	true	是否启用清除控件	-
left-icon	string	否	search	左侧搜索图标，不启用传none	-
ext-style	string | Record<string, string>	否	-	根节点样式	-
animation	boolean	否	true	是否启用搜索按钮动画	-
always-show-search	boolean	否	false	是否常显搜索按钮，默认在聚焦状态下隐藏	-
always-show-prefix	boolean	否	false	是否常显前置插槽，默认在聚焦状态下隐藏	-
always-show-suffix	boolean	否	false	是否常显后置插槽，默认在聚焦状态下隐藏	-
always-show-right-icon	boolean	否	false	是否常显右侧图标插槽，默认在聚焦状态下隐藏	-
use-search-button	boolean	否	true	是否启用组件搜索按钮	-

事件 Events

名称	参数列表	描述	备注
focus	(e: CustomEvent) => void	输入框聚焦时触发	-
blur	(e: CustomEvent) => void	输入框失焦时触发	-
search	(e: CustomEvent<{value: string}>) => void	确定搜索时触发	-
change	(e: CustomEvent<{value: string}>) => void	输入值变化时触发	-
clear	(e: CustomEvent) => void	清除时触发	-
click-input	(e: CustomEvent) => void	点击输入框是触发	-

插槽 Slots

名称	说明	备注
prefix	输入框外部左侧插槽	-
left-icon	输入框内部左侧插槽	-
right-icon	输入框内部右侧插槽	-
suffix	输入框外部右侧插槽	-

外部样式类 External Classes

名称	说明	备注
ext-class	根节点样式类	-
search-button-class	搜索按钮样式类	如果不需要按钮动画，可使用 transition: none;覆盖
search-inner-class	搜索框容器样式类
input-class	input 样式类	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--search-font-size	theme.fontSize.t5	搜索文字字号	-
--search-out-background	theme.color.gray.background.default	搜索框整体背景色	-
--search-out-padding-v	theme.spacing.vertical.v5	搜索框整体垂直方向内边距	-
--search-out-padding-h	theme.spacing.horizontal.h7	搜索框整体水平方向内边距	-
--search-inner-background	theme.color.gray.background.40	搜索框内部输入区域背景色	-
--search-inner-padding-v	theme.spacing.vertical.v4	搜索框内部输入区域垂直方向内边距	-
--search-inner-padding-h	theme.spacing.horizontal.h7	搜索框内部输入区域水平方向内边距	-
--search-radius	theme.borderRadius.r2	搜索框容器圆角	-
--search-font-size	theme.fontSize.t5	文字字号	-
--search-line-height	theme.lineHeight.multiline.t3	文字行高	-
--search-icon-size	theme.fontSize.t10	搜索图标尺寸	-
--search-icon-color	theme.color.gray.texticon.900	搜索图标颜色	-
--search-left-icon-gap	theme.spacing.gap.g4	搜索图标的右侧间距	-
--search-button-padding-h	theme.spacing.horizontal.g7	搜索按钮的水平间距	-