uView 是 uni-app 生态的一款不错的前端 UI 框架，集成了很多实用组件。
在使用 搜索 组件时遇到一个问题，点击搜索按钮没有反应。
下面开始使用方法：
u-search 可以通过 placeholder 参数设置占位内容，通过 v-model 双向绑定一个变量值：
<template>
<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
</template>
<script>
export default {
data() {
return {
keyword: '遥看瀑布挂前川'
}
}
}
</script>
通过 shape 设置输入框两端的形状，square -方形带圆角，round (默认)-半圆形：
<u-search shape="round"></u-search>
开启右边控件（搜索按钮）：
show-action 配置是否开启右边按钮控件。
action-text 配置控件内容。
animation (默认为 false )设置为 true 的话，失去焦点，或者点击控件按钮时，控件自动消失，并且带有动画效果。
<u-search :show-action="true" action-text="搜索" :animation="true"></u-search>
自定义样式：
通过 input-align 设置输入框内容的对其方式，和 css 的 text-align 同理。
通过 border-color 设置整个搜索组件的边框，只要配置了颜色，才会出现边框。
通过 height 设置组件高度。
通过 disabled 设置是否禁用输入框。
通过 bg-color 设置是搜索组件背景颜色。
<u-search input-align="center" height="70"></u-search>
支持的事件（Events）：
可以通过监听 change 事件，在回调中将返回的结果绑定一个变量去获得用户的输入内容。
这里需要注意一下：如果只使用 search 事件，点击搜索按钮是没有反应的，需要再加一个 custom 。
<u-search v-model="keywords" :focus="true" shape="square" search-icon="none" height="70" :show-action="true" @custom="searchBank" @search="searchBank"/>
| 事件名 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
| change | 输入框内容发生变化时触发 | value：输入框的值 | – |
| search | 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发 | value：输入框的值 | – |
| custom | 用户点击右侧控件时触发 | value：输入框的值 | – |
| blur | 输入框失去焦点时触发 | value：输入框的值 | – |
| focus | 输入框获得焦点时触发 | value：输入框的值 | – |
| clear | 配置了 clearabled 后，清空内容时会发出此事件 |
– | – |
| click 1.5.3 | disabled 为 true 时，点击输入框，发出此事件，用于跳转搜索页 |
– | – |
未经允许不得转载：w3h5 » uView搜索组件u-serch的使用及点击搜索按钮无效的问题解决
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/150494.html