u-search是uni-app框架中的一款搜索组件，可以方便地实现搜索功能。下面简单介绍一下如何使用u-search以及相关API。
- 引入u-search组件
在需要使用u-search组件的页面中，首先需要引入它：
<template> <view> <u-search></u-search> </view> </template> <script> import uSearch from '@/components/u-search/u-search.vue'; export default { components: { uSearch } }; </script>
- 配置u-search组件
u-search组件有以下几个可配置属性：
value：搜索框的值，默认为空字符串。placeholder：搜索框的占位符，默认为“搜索”。searchBtnText：搜索按钮的文本，默认为“搜索”。cancelBtnText：取消按钮的文本，默认为“取消”。showCancelBtn：是否显示取消按钮，默认为true。focus：是否自动聚焦到搜索框，默认为false。inputAlign：搜索框内部文本对齐方式，默认为left。
您可以通过在u-search组件上绑定这些属性来进行配置：
<u-search :value="keyword" placeholder="请输入关键字" search-btn-text="查询" cancel-btn-text="返回" :show-cancel-btn="true" :focus="true" input-align="center" @search="onSearch" @cancel="onCancel" />
- 监听u-search事件
u-search组件有两个事件：
search：当用户点击搜索按钮或输入框按下回车键时触发。事件回调函数会传入一个参数，表示用户输入的关键字。cancel：当用户点击取消按钮时触发。
您可以在页面的methods中定义这些事件的回调函数，并在u-search组件上绑定它们：
<u-search ... @search="onSearch" @cancel="onCancel" /> <script> export default { data() { return { keyword: '' }; }, methods: { onSearch(keyword) { console.log('搜索关键字：', keyword); // TODO：执行搜索操作 }, onCancel() { uni.navigateBack(); } } }; </script>
- u-search API
除了配置和监听事件之外，u-search组件还提供了一些API，可以通过ref引用来调用：
focus()：聚焦到搜索框。blur()：失去焦点。clear()：清空搜索框。setKeyword(keyword)：设置搜索框的值为指定的关键字。
例如，我们可以在某个按钮的点击事件中调用u-search组件的focus()方法，让搜索框自动获取焦点：
<template> <view> <u-search ref="searchBox"></u-search> <button @tap="onBtnTap">打开搜索框</button> </view> </template> <script> export default { methods: { onBtnTap() { this.$refs.searchBox.focus(); } } }; </script>
以上是u-search组件的基本使用方法和API介绍，希望能对您有所帮助。
