Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >uView搜索组件u-serch的使用及点击搜索按钮无效的问题解决

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

作者头像
德顺
发布于 2020-11-12 12:21:02
发布于 2020-11-12 12:21:02
13.2K05
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:5
代码可运行

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

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

下面开始使用方法:

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
</template>

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<u-search shape="round"></u-search>

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

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

action-text 配置控件内容。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<u-search :show-action="true" action-text="搜索" :animation="true"></u-search>

自定义样式:

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

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

通过 height 设置组件高度。

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<u-search input-align="center" height="70"></u-search>

支持的事件(Events):

可以通过监听 change 事件,在回调中将返回的结果绑定一个变量去获得用户的输入内容。

这里需要注意一下:如果只使用 search 事件,点击搜索按钮是没有反应的,需要再加一个 custom 。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uView搜索组件u-serch的使用及点击搜索按钮无效的问题解决
uView 是 uni-app 生态的一款不错的前端 UI 框架,集成了很多实用组件。
德顺
2023/08/25
2.7K0
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》018-Vue中的事件类型
在构建现代 web 应用时,事件处理是实现用户交互的核心要素之一。Vue 作为一个流行的前端框架,为开发者提供了一系列强大而灵活的事件处理机制。这使得我们能够方便地响应用户的操作,从而提升应用的互动性和用户体验。
愚公搬代码
2025/07/03
790
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》022-定义组件
在现代前端开发中,组件化设计已成为构建用户界面的重要方法。Vue.js 作为一个流行的前端框架,以其灵活的组件系统和简洁的语法,帮助开发者高效地创建复杂的应用。组件不仅使代码结构更加清晰,还可以提高可重用性和可维护性。
愚公搬代码
2025/07/05
550
【HarmonyOS】输入框焦点控制实现键盘显隐和进入页面默认弹出键盘获取a焦点设置
##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 (金融理财#
GeorgeGcs
2025/06/29
1230
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》045-Element Plus基本组件示例
在前端开发中,组件化的设计理念已成为提升开发效率和用户体验的关键。Element Plus 作为一款专为 Vue 3 设计的 UI 组件库,以其简洁优雅的设计和丰富多样的组件,帮助开发者轻松构建美观且功能强大的用户界面。
愚公搬代码
2025/06/02
1700
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》045-Element Plus基本组件示例
Flutter 桌面开发 | 键盘快捷键功能 - Shortcuts 组件
在桌面端的开发中,键盘快捷键是非常常见而必要的,比如 Ctrl + F 搜索, Ctrl + C 复制等。Flutter 既然可以开发桌面端应用,那必然要提供自定义快捷键,触发事件的功能支持。这就是本节要介绍的 Shortcuts 组件体系,相关代码后续会放入 FlutterUnit 中,敬请关注 ~
张风捷特烈
2023/05/23
1.4K1
Flutter 桌面开发 | 键盘快捷键功能 - Shortcuts 组件
六、ArkTS 常用组件-按钮(Button)/切换按钮(Toggle)/文本输出(TextInput)
Button组件有两种使用方式,分别是不包含子组件和包含子组件,两种方式下,Button 组件所需的参数有所不同,下面分别介绍
Harry技术
2025/01/13
6140
六、ArkTS 常用组件-按钮(Button)/切换按钮(Toggle)/文本输出(TextInput)
黑马程序员uni-app 小兔鲜儿 项目及bug记录(下) Day 5(有作业)
nChangeSelectedAll" class=“all” :class=“{ checked: isSelectedAll }”>全选 合计: {{ selectedCartListMoney }} <view class=“button payment-button” :class=“{ disabled: selectedCartListCount === 0 }” @tap=“gotoPayment” > 去结算({{ selectedCartListCount }}) 登录后可查看购物车中的商品 去登录
Qiuner
2024/07/19
2880
黑马程序员uni-app 小兔鲜儿 项目及bug记录(下) Day 5(有作业)
HarmonyOS 开发实践 —— 基于TextInput的常见自定义效果解决方案
输入框未获焦时热搜词自动滚动,输入框获焦时输入框热搜词暂停滚动,热搜词文字到输入框右侧时文字内容会渐变显示。
小帅聊鸿蒙
2024/12/09
5860
HarmonyOS 开发实践 —— 基于TextInput的常见自定义效果解决方案
python tkinter 设计指南
pack() 是一种较为简单的布局方法,在不使用任何参数的情况下,它会将控件以添加时的先后顺序,自上而下,一行一行的进行排列,并且默认居中显示。pack() 方法的常用参数如下所示:
独元殇
2023/03/21
7.5K0
Android开源库:手把手教你实现一个简单好用的搜索框(含历史搜索记录)
对于含有一键清空功能 & 更多自定义样式的EditText自定义控件具体请看我的另外一个简单 & 好用的开源组件:Android自定义EditText:手把手教你做一款含一键删除&自定义样式的SuperEditText
Carson.Ho
2019/02/22
3.3K0
vue3+ElementPlus 表单编辑与查看模式切换的应用
具体实现如下:当flag=true时候展示el-input输入框(v-if="row.flag")
流年Felix
2023/08/08
1.3K0
vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮
<font color='red'>注意点1:</font>改动App和MyItem页面
刘大猫
2024/10/24
960
微信小程序官方组件展示之表单组件textarea源码
以下将展示微信小程序之表单组件textarea源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。
软件事业部
2022/09/26
1.3K0
组件化详细
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
用户11097514
2024/05/31
3160
组件化详细
vue封装带提示框的单选/多选文本框组件
在web开发中,经常会遇到公共模块复用的问题,例如页头、页脚、导航条等,传统的后端视图引擎如smarty、服务器配置SSI、或是纯前端的嵌套iframe、js请求模板资源动态渲染等方式的表现都只差强人意。而现代前端框架,尤其是vue的组件化彻底改变了前端开发模式,大大提升多人合作开发效率。
CS逍遥剑仙
2018/12/15
5.6K0
vue封装带提示框的单选/多选文本框组件
weex-13-组件textarea使用
一般像这种用户不能使用的情况下,要将控件背景颜色设置成灰色系列,所以我们就借助伪类,设置一下
酷走天涯
2018/09/14
1.9K0
weex-13-组件textarea使用
常用的键盘事件
1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListen
清出于兰
2020/10/26
1.7K0
常用的键盘事件
【Flutter实战】文本组件及五大案例
老孟导读:大家好,这是【Flutter实战】系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握。
老孟Flutter
2020/09/11
7.5K0
【Flutter实战】文本组件及五大案例
常用键盘事件
1. 键盘事件    <script>        // 常用的键盘事件        //1. keyup 按键弹起的时候触发        document.addEventListe
星辰_大海
2020/09/30
1.7K0
推荐阅读
相关推荐
uView搜索组件u-serch的使用及点击搜索按钮无效的问题解决
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验