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

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.3disabledtrue 时,点击输入框,发出此事件,用于跳转搜索页--


未经允许不得转载:前端资源网 - w3h5 » uView搜索组件u-serch的使用及点击搜索按钮无效的问题解决

赞 (6)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)