前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uView搜索组件u-serch的使用及点击搜索按钮无效的问题解决

uView搜索组件u-serch的使用及点击搜索按钮无效的问题解决

作者头像
德顺
发布2020-11-12 20:21:02
10.8K0
发布2020-11-12 20:21:02
举报
文章被收录于专栏:前端资源前端资源

uView 是 uni-app 生态的一款不错的前端 UI 框架,集成了很多实用组件。

在使用 搜索 组件时遇到一个问题,点击搜索按钮没有反应。

下面开始使用方法:

u-search 可以通过 placeholder 参数设置占位内容,通过 v-model 双向绑定一个变量值:

代码语言:javascript
复制
<template>
??<u-search?placeholder="日照香炉生紫烟"?v-model="keyword"></u-search>
</template>

<script>
??export?default?{
????data()?{
??????return?{
????????keyword:?'遥看瀑布挂前川'
??????}
????}
??}
</script>

通过 shape 设置输入框两端的形状,square -方形带圆角,round (默认)-半圆形:

代码语言:javascript
复制
<u-search?shape="round"></u-search>

开启右边控件(搜索按钮):

show-action 配置是否开启右边按钮控件。

action-text 配置控件内容。

animation (默认为 false )设置为 true 的话,失去焦点,或者点击控件按钮时,控件自动消失,并且带有动画效果。

代码语言:javascript
复制
<u-search?:show-action="true"?action-text="搜索"?:animation="true"></u-search>

自定义样式:

通过 input-align 设置输入框内容的对其方式,和 css 的 text-align 同理。

通过 border-color 设置整个搜索组件的边框,只要配置了颜色,才会出现边框。

通过 height 设置组件高度。

通过 disabled 设置是否禁用输入框。

通过 bg-color 设置是搜索组件背景颜色。

代码语言:javascript
复制
<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 ? uView搜索组件u-serch的使用及点击搜索按钮无效的问题解决

本文参与?腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客?前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 开启右边控件(搜索按钮):
  • 自定义样式:
  • 支持的事件(Events):
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
http://www.vxiaotou.com