mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
docs(Search): update demo
This commit is contained in:
parent
5a5789dff8
commit
32d0495777
@ -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>
|
||||||
|
@ -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);
|
||||||
},
|
},
|
||||||
|
@ -10,6 +10,8 @@
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
### 基本用法
|
### 基本用法
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
Loading…
x
Reference in New Issue
Block a user