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

2023-08-25 12:55:22 浏览数 (3)

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

0 人点赞