t-search

Search 搜索

组件介绍

简易搜索框组件，提供搜索输入、搜索历史和热门搜索功能。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <view class="search-demo">
    <t-search 
      v-model="searchValue"
      placeholder="请输入搜索内容"
      :historySearch="historyList"
      :hotSearches="hotList"
      @search="onSearch"
    ></t-search>
  </view>
</template>

<script setup>
const searchValue = ref('');
const historyList = ref(['手机', '电脑', '耳机']);
const hotList = ref(['iPhone', '华为', '小米']);

function onSearch(value) {
  console.log('搜索:', value);
}
</script>

<style scoped>
.search-demo {
  padding: 20rpx;
}
</style>

Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
placeholder	String	"请输入"	输入框为空时占位符	-
content	String	""	搜索的内容	-
historySearch	Array	[]	历史搜索记录	-
hotSearches	Array	[]	热门搜索	-
historyTitle	String	"历史搜索"	历史搜索标题	-
hotTitle	String	"热门搜索"	热门搜索标题	-
maxHistoryCount	Number	10	最大历史搜索显示数量	-
maxHotCount	Number	10	最大热门搜索显示数量	-

Events

事件名	说明	回调参数
search	点击搜索时触发	搜索内容
select	选择历史或热门搜索时触发
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象