# t-search
Search 搜索
t-search 组件介绍
简易搜索框组件，提供搜索输入、搜索历史和热门搜索功能。
t-search 平台兼容
| Harmony | H5 | Android | iOS | 小程序 | UTS |
|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
t-search 基础用法
vue
<template>
<view class="p-15">
<tui-theme-switch></tui-theme-switch>
<t-search class="mb-15"
type="primary"
@search="onSearch"
@select="onSelect"
content="默认搜索内容"
:historySearch="historySearch"
:hotSearches="hotSearches"></t-search>
</view>
</template>
<script setup>
import { ref } from 'vue'
const historySearch = ref([
"智能手机",
"笔记本电脑",
"智能家居",
"运动鞋",
"连衣裙"
]);
const hotSearches = ref([
"苹果手机",
"小米电视",
"华为手表",
"耐克跑鞋",
"美的空调"
]);
function onSearch(e : string) {
console.log(e)
}
function onSelect(e : UTSJSONObject) {
console.log(e)
uni.showToast({
title: '请控制台查看打印内容'
})
}
</script>t-search 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 | 最大热门搜索显示数量 | - |
t-search Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| search | 点击搜索时触发 | 搜索内容 |
| select | 选择历史或热门搜索时触发 | - |
| click | 点击时触发 | - |
| transitionend | 动画结束时触发 | - |
| initFinished | 组件初始化完成触发 | 组件的节点信息 |
| touchstart | 触摸开始时触发 | 触摸事件对象 |
| touchend | 触摸结束时触发 | 触摸事件对象 |
| touchmove | 触摸移动时触发 | 触摸事件对象 |
| touchcancel | 触摸取消时触发 | 触摸事件对象 |