TnSearchBox 搜索框

该组件一般用于搜索输入的场景，提供了丰富的配置参数供用户自定义搜索框的样式

组件位置

nodeuni_modules

typescript

import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'

import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'

typescript

import TnSearchBox from '@/uni_modules/tuniaoui-vue3/components/search-box/src/search-box.vue'

import TnSearchBox from '@/uni_modules/tuniaoui-vue3/components/search-box/src/search-box.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过v-model绑定输入框输入的值，通过@input事件可以监听搜索框的输入事件，默认情况下已开启输入节流功能，如果需要关闭可以将throllte设置为false，通过@search事件可以监听到用户点击搜索按钮的事件

vue

<script lang="ts" setup>
import { ref } from 'vue'

const searchValue = ref('')

const searchInputEvent = (value: string) => {
  // eslint-disable-next-line no-console
  console.log('searchInputEvent', value)
}
const searchBtnClickEvent = (value: string) => {
  // eslint-disable-next-line no-console
  console.log('searchBtnClickEvent', value)
}
</script>

<template>
  <TnSearchBox
    v-model="searchValue"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const searchValue = ref('')

const searchInputEvent = (value: string) => {
  // eslint-disable-next-line no-console
  console.log('searchInputEvent', value)
}
const searchBtnClickEvent = (value: string) => {
  // eslint-disable-next-line no-console
  console.log('searchBtnClickEvent', value)
}
</script>

<template>
  <TnSearchBox
    v-model="searchValue"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
</template>

关闭搜索输入框输入节流

vue

<template>
  <TnSearchBox
    v-model="searchValue"
    :throllte="false"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
</template>

<template>
  <TnSearchBox
    v-model="searchValue"
    :throllte="false"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
</template>

搜索框形状

通过shape属性可以设置搜索框的形状，目前支持round和square两种形状，默认为square

vue

<template>
  <TnSearchBox
    v-model="searchValue"
    shape="round"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
</template>

<template>
  <TnSearchBox
    v-model="searchValue"
    shape="round"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
</template>

搜索框文字对齐方式

通过text-align属性可以设置搜索框文字的对齐方式，目前支持left、center和right三种对齐方式，默认为left

vue

<template>
  <TnSearchBox
    v-model="searchValue"
    text-align="center"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
</template>

<template>
  <TnSearchBox
    v-model="searchValue"
    text-align="center"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
</template>

API

Props

属性名	说明	类型	默认值	可选值
v-model / model-value	输入框内容绑定的值	String	-	-
placeholder	搜索框占位内容的值	String	请输入搜索内容	-
placeholder-icon	搜索框占位内容左边图标	String	search	图标有效值
shape	搜索框的形状	String	square	round
size	搜索框的尺寸，可以设置 `sm`、`lg`、`xl`	String	-	`sm` \ `lg` `xl`
text-color	搜索框文字的颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
placeholder-color	搜索框占位文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
text-align	搜索框文字对齐方式	String	left	`center` \ `right`
border	显示边框	Boolean	`true`	`false`
border-color	边框颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
focus	获取搜索框焦点	Boolean	`false`	`true`
disabled	是否禁用搜索框	Boolean	`false`	`true`
clearable	是否显示清除按钮	Boolean	`true`	`false`
search-button	是否显示搜索按钮	Boolean	`true`	`false`
search-button-text	搜索按钮的文字	String	搜索	-
search-button-text-color	搜索按钮字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
search-button-bg-color	搜索按钮背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-
throllte	输入是否节流	Boolean	`true`	`false`
throllte-time	节流延迟时间，单位毫秒	Number	1000	-

Events

事件名	说明	类型
change	输入发生改变时触发	`(value: string) => void`
input	输入时触发	`(value: string) => void`
click	搜索框点击事件	`() => void`
focus	聚焦搜索输入框框时触发	`() => void`
blur	搜索输入框失去焦点时触发	`() => void`
search	点击搜索按钮时触发	`(value: string) => void`
clear	点击清除按钮时触发	`() => void`

TnSearchBox 搜索框 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

关闭搜索输入框输入节流 ​

搜索框形状 ​

搜索框文字对齐方式 ​

API ​

Props ​

Events ​