factory_mp_old/uni_modules/uni-search-bar/readme.md

86 lines
3.4 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## SearchBar 搜索栏
> **组件名uni-search-bar**
> 代码块: `uSearchBar`
评分组件
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<!-- 基本用法 -->
<uni-search-bar @confirm="search" @input="input" ></uni-search-bar>
<!-- v-model 用法 -->
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @change="change" @clear="clear">
<!-- 自定义Placeholder -->
<uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar>
<!-- 设置圆角 -->
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
```
## API
### SearchBar Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|value/v-model |StringNumber | |搜索栏绑定值 |
|placeholder |String |搜索 |搜索栏Placeholder |
|radius |Number |10 |搜索栏圆角单位px |
|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} |
|@focus |input 获取焦点时触发事件返回参数为uniSearchBar的value |e={value:Number} |
|@blur |input 失去焦点时触发事件返回参数为uniSearchBar的value |e={value:Number} |
### 替换 icon 的 slot 插槽
|插槽称名 |说明 |
|:-: |:-: |
|searchIcon |替换组件的搜索图标|
|clearIcon |替换组件的清除图标|
```html
<!-- 替换组件的搜索图标 -->
<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>
```
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar)