SearchBar 搜索框

用于搜索场景的输入框组件，支持自定义样式和行为。

导入

import SearchBar from '@/components/form/SearchBar.vue';

使用方法

基础用法

使用 v-model 绑定输入值，通过 placeholder 设置占位文本。

<template>
  <SearchBar v-model="value" placeholder="请输入搜索关键词" />
</template>

<script setup>
import { ref } from 'vue';
import SearchBar from '@/components/form/SearchBar.vue';

const value = ref('');
</script>

显示取消按钮

通过 cancelState 属性控制取消按钮的显示状态。

<template>
  <SearchBar v-model="value" placeholder="请输入搜索关键词" cancelState="show" />
</template>

<script setup>
import { ref } from 'vue';
import SearchBar from '@/components/form/SearchBar.vue';

const value = ref('');
</script>

自定义样式

可以自定义搜索框的外观，包括背景色、文字颜色等。

<template>
  <SearchBar
    v-model="value" 
    placeholder="请输入搜索关键词"
    :innerStyle="{
      borderRadius: 5,
      backgroundColor: '#9a66ec',
    }"
    :inputStyle="{ color: '#fff' }"
    placeholderTextColor="#fff"
    :leftIconProps="{ color: '#fff' }"
    cancelState="show"
  />
</template>

<script setup>
import { ref } from 'vue';
import SearchBar from '@/components/form/SearchBar.vue';

const value = ref('');
</script>

API 参考

Props

名称	说明	类型	必填	默认值
v-model	输入框的值	string	否	''
inputColor	输入框的文字颜色	string	否	'text.content'
placeholder	输入框的placeholder	string	否	''
placeholderTextColor	输入框的placeholder文字颜色	string	否	'text.second'
cancelText	取消按钮的文字	string	否	'取消'
cancelTextColor	取消按钮的文字颜色	string	否	'primary'
cancalLostFocus	点击取消按钮是否自动让输入框失去焦点	boolean	否	true
cancalClear	点击取消按钮是否自动清空输入框	boolean	否	true
leftIcon	左侧图标	string | null	否	'search'
leftIconSize	左侧图标大小	string | number	否	40
leftIconColor	左侧图标颜色	string	否	'text.content'
leftIconProps	图标自定义属性	Partial<IconProps>	否	-
cancelState	取消按钮显示状态	'hidden' | 'show' | 'show-active' | 'show-no-empty' | 'show-active-or-no-empty'	否	'show-active-or-no-empty'
innerStyle	自定义样式	ViewStyle	否	-
containerStyle	容器自定义样式	ViewStyle	否	-
inputStyle	自定义样式	TextStyle	否	-
cancelStyle	自定义样式	ViewStyle	否	-
cancelTextStyle	自定义样式	TextStyle	否	-

Slots

名称	说明	参数
leftIcon	自定义左侧图标	-
rightIcon	自定义右侧图标	-
rightButton	自定义右侧按钮	{ onCustomButtonClick: (type: 'search' | 'cancel') => void }
cancelButton	自定义取消按钮	-

Events

名称	说明	参数
search	搜索事件	搜索关键词字符串
update:modelValue	输入值改变事件	新的输入值
blur	失去焦点事件	-
focus	获得焦点事件	-
cancel	取消事件	-

主题变量

变量名	默认值	说明
SearchBarTextColor	text.content	输入框文字颜色
SearchBarCancelTextColor	primary	取消按钮文字颜色
SearchBarLeftIcon	search	左侧图标
SearchBarLeftIconSize	40	左侧图标大小
SearchBarLeftIconColor	text.content	左侧图标颜色
SearchBarBackgroundColor	white	背景色
SearchBarBorderRadius	40	边框圆角
SearchBarPaddingHorizontal	28	水平内边距
SearchBarPaddingVertical	16	垂直内边距
SearchBarCancelPaddingHorizontal	20	取消按钮水平内边距
SearchBarCancelPaddingVertical	16	取消按钮垂直内边距