You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
4 years ago | |
|---|---|---|
| .. | ||
| components/uni-search-bar | 4 years ago | |
| changelog.md | 5 years ago | |
| package.json | 5 years ago | |
| readme.md | 5 years ago | |
readme.md
SearchBar 搜索栏
代码块:
uSearchBar
评分组件
安装方式
本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components。
如需通过npm方式使用uni-ui组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55
基本用法
在 template 中使用组件
<!-- 基本用法 -->
<uni-search-bar @confirm="search" @input="input" ></uni-search-bar>
<!-- 自定义Placeholder -->
<uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar>
<!-- 设置圆角 -->
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
API
SearchBar Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| placeholder | String | 搜索 | 搜索栏Placeholder |
| radius | Number | 10 | 搜索栏圆角,单位rpx |
| clearButton | String | auto | 是否显示清除按钮,可选值always-一直显示、auto-输入框不为空时显示、none-一直不显示 |
| cancelButton | String | auto | 是否显示取消按钮,可选值always-一直显示、auto-输入框不为空时显示、none-一直不显示 |
| cancelText | String | 取消 | 取消按钮的文字 |
| bgColor | String | #F8F8F8 | 输入框背景颜色 |
| maxlength | Number | 100 | 输入最大长度 |
| focus | Boolean | false |
SearchBar Events
| 事件称名 | 说明 | 返回参数 |
|---|---|---|
| @confirm | uniSearchBar 的输入框 confirm 事件,返回参数为uniSearchBar的value | e={value:Number} |
| @input | uniSearchBar 的 value 改变时触发事件,返回参数为uniSearchBar的value | e=value |
| @cancel | 点击取消按钮时触发事件,返回参数为uniSearchBar的value | e={value:Number} |
| @clear | 点击清除按钮时触发事件,返回参数为uniSearchBar的value | e={value:Number} |
| @blur | input失去焦点时触发事件,返回参数为uniSearchBar的value | e={value:Number} |
替换 icon 的 slot 插槽
| 插槽称名 | 说明 |
|---|---|
| searchIcon | 替换组件的搜索图标 |
| clearIcon | 替换组件的清除图标 |
<!-- 替换组件的搜索图标 -->
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
</uni-search-bar>
<!-- 替换组件的清除图标 -->
<uni-search-bar placeholder="自定义clearIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
<view slot="clearIcon" style="color: #999999" >X</view>
</uni-search-bar>