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"/>

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

推荐阅读：

CSS中的background属性与margin和padding内外边距的关系总结

https百度推送push.js报错的解决方法

给网站添加熊掌号粉丝关注按钮

JetbrainsCrack-2.7激活补丁更新 亲测激活PhpStorm2018

jQuery text() html() val()设置内容和attr()设置属性的用法