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 。
代码语言:javascript复制<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-Web前端开发资源网 » uView搜索组件u-serch的使用及点击搜索按钮无效的问题解决