docs(Search): update demo

This commit is contained in:
chenjiahan 2020-03-21 07:11:19 +08:00 committed by neverland
parent 5a5789dff8
commit 32d0495777
3 changed files with 40 additions and 26 deletions

View File

@ -7,7 +7,7 @@
/> />
</demo-block> </demo-block>
<demo-block title="监听对应事件"> <demo-block title="事件监听">
<van-search <van-search
value="{{ value }}" value="{{ value }}"
show-action show-action
@ -19,39 +19,40 @@
/> />
</demo-block> </demo-block>
<demo-block title="禁用搜索框"> <demo-block title="搜索框内容对齐">
<van-search <van-search
value="{{ value }}" value="{{ value }}"
input-align="center"
placeholder="请输入搜索关键词" placeholder="请输入搜索关键词"
/>
</demo-block>
<demo-block title="禁用搜索框">
<van-search
disabled disabled
value="{{ value }}"
placeholder="请输入搜索关键词"
/> />
</demo-block> </demo-block>
<demo-block title="自定义背景色"> <demo-block title="自定义背景色">
<van-search <van-search
value="{{ value }}" value="{{ value }}"
shape="round"
background="#4fc08d"
placeholder="请输入搜索关键词" placeholder="请输入搜索关键词"
background="#c8c9cc"
/> />
</demo-block> </demo-block>
<demo-block title="搜索框内容对齐"> <demo-block title="自定义按钮">
<van-search
value="{{ value }}"
placeholder="请输入搜索关键词"
input-align="center"
/>
</demo-block>
<demo-block title="高级用法">
<van-search <van-search
value="{{ value }}" value="{{ value }}"
label="地址"
shape="round"
placeholder="请输入搜索关键词" placeholder="请输入搜索关键词"
use-action-slot use-action-slot
bind:change="onChange" bind:change="onChange"
bind:search="onSearch" bind:search="onSearch"
label="地址"
shape="round"
> >
<view slot="action" bind:tap="onClick">搜索</view> <view slot="action" bind:tap="onClick">搜索</view>
</van-search> </van-search>

View File

@ -20,7 +20,7 @@
<van-search value="{{ value }}" placeholder="请输入搜索关键词" /> <van-search value="{{ value }}" placeholder="请输入搜索关键词" />
``` ```
### 监听对应事件 ### 事件监听
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发 `van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
@ -34,12 +34,16 @@
/> />
``` ```
### 自定义背景色 ### 搜索框内容对齐
通过 `background` 属性可以自定义组件背景色 通过 `input-align` 属性可以设置搜索框内容的对齐方式
```html ```html
<van-search placeholder="Placeholder" value="{{ value }}" background="#c8c9cc"/> <van-search
value="{{ value }}"
input-align="center"
placeholder="请输入搜索关键词"
/>
``` ```
### 禁用搜索框 ### 禁用搜索框
@ -47,24 +51,34 @@
通过 `disabled` 属性可以将组件设置为禁用状态 通过 `disabled` 属性可以将组件设置为禁用状态
```html ```html
<van-search placeholder="请输入搜索关键词" value="{{ value }}" disabled/> <van-search
disabled
value="{{ value }}"
placeholder="请输入搜索关键词"
/>
``` ```
### 搜索框内容对齐 ### 自定义背景色
通过 `input-align` 属性可以设置搜索框内容的对齐方式 通过`background`属性可以设置搜索框外部的背景色,通过`shape`属性设置搜索框的形状,可选值为`round`
```html ```html
<van-search placeholder="Placeholder" value="{{ value }}" input-align="center"/> <van-search
value="{{ value }}"
shape="round"
background="#4fc08d"
placeholder="请输入搜索关键词"
/>
``` ```
### 自定义行动按钮 ### 自定义按钮
`van-search` 支持自定义右侧取消按钮,使用名字为 action 的 slot并设置 use-action-slot 为 true 即可。 `van-search` 支持自定义右侧取消按钮,使用名字为 action 的 slot并设置 use-action-slot 为 true 即可。
```html ```html
<van-search <van-search
value="{{ value }}" value="{{ value }}"
label="地址"
placeholder="请输入搜索关键词" placeholder="请输入搜索关键词"
use-action-slot use-action-slot
bind:change="onChange" bind:change="onChange"
@ -79,17 +93,14 @@ Page({
data: { data: {
value: '' value: ''
}, },
onChange(e) { onChange(e) {
this.setData({ this.setData({
value: e.detail value: e.detail
}); });
}, },
onSearch() { onSearch() {
Toast('搜索' + this.data.value); Toast('搜索' + this.data.value);
}, },
onClick() { onClick() {
Toast('搜索' + this.data.value); Toast('搜索' + this.data.value);
}, },

View File

@ -10,6 +10,8 @@
} }
``` ```
## 代码演示
### 基本用法 ### 基本用法
```html ```html