blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Search): Search demo desc adjustment (#5603)

Browse Source
This commit is contained in:
Lindy 2020-01-19 17:42:42 +08:00 committed by neverland
parent 0bfbcf6ca9
commit a30bf27559
4 changed files with 94 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/search/README.md
View File

@ -24,6 +24,23 @@ export default {
}
}
```
### Custom Background Color
```html
<van-search placeholder="Placeholder" v-model="value" background="#c8c9cc"/>
```
### Disable Search Bar
```html
<van-search placeholder="Placeholder" v-model="value" disabled/>
```
### Search Bar Content Alignment
```html
<van-search placeholder="Placeholder" v-model="value" input-align="center"/>
```
### Listen to Events

19
src/search/README.zh-CN.md
View File

@ -19,6 +19,25 @@ v-model 用于控制搜索框中的文字，background 可以自定义搜索框
<van-search placeholder="请输入搜索关键词" v-model="value" />
```
### 自定义背景色
```html
<van-search placeholder="Placeholder" v-model="value" background="#c8c9cc"/>
```
### 禁用搜索框
```html
<van-search placeholder="请输入搜索关键词" v-model="value" disabled/>
```
### 搜索框内容对齐
通过 `input-align` 属性可以设置搜索框内容的对齐方式
```html
<van-search placeholder="Placeholder" v-model="value" input-align="center"/>
```
### 事件监听
Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘上的搜索/回车按钮后触发，`cancel`事件在点击搜索框右侧取消按钮时触发

20
src/search/demo/index.vue
View File

@ -4,6 +4,18 @@
<van-search v-model="value" :placeholder="$t('placeholder')" />
</demo-block>
<demo-block :title="$t('background')">
<van-search v-model="value" :placeholder="$t('placeholder')" background="#c8c9cc" />
</demo-block>
<demo-block :title="$t('disabled')">
<van-search v-model="value" :placeholder="$t('placeholder')" disabled />
</demo-block>
<demo-block :title="$t('inputAlign')">
<van-search placeholder="Placeholder" v-model="value" input-align="center" />
</demo-block>
<demo-block :title="$t('listenToEvents')">
<form action="/">
<van-search
@ -40,14 +52,20 @@ export default {
label: '地址',
placeholder: '请输入搜索关键词',
customButton: '自定义按钮',
background: '自定义背景色',
inputAlign: '搜索框内容对齐',
listenToEvents: '事件监听',
disabled: '禁用搜索框'
},
'en-US': {
label: 'Address',
placeholder: 'Placeholder',
customButton: 'Custom Action Button',
background: 'Custom Background Color',
inputAlign: 'Search Bar Content Alignment',
listenToEvents: 'Listen to Events',
},
disabled: 'Disable Search Bar'
}
},
data() {

39
src/search/test/__snapshots__/demo.spec.js.snap
View File

@ -15,6 +15,45 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div>
<div class="van-search" style="background: rgb(200, 201, 204);">
<div class="van-search__content van-search__content--square">
<div class="van-cell van-cell--borderless van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
<!----></i></div>
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" class="van-field__control"></div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="van-search" style="background: rgb(255, 255, 255);">
<div class="van-search__content van-search__content--square">
<div class="van-cell van-cell--borderless van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
<!----></i></div>
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="search" disabled="disabled" placeholder="请输入搜索关键词" class="van-field__control"></div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="van-search" style="background: rgb(255, 255, 255);">
<div class="van-search__content van-search__content--square">
<div class="van-cell van-cell--borderless van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
<!----></i></div>
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="search" placeholder="Placeholder" class="van-field__control van-field__control--center"></div>
</div>
</div>
</div>
</div>
</div>
<div>
<form action="/">
<div class="van-search van-search--show-action" style="background: rgb(255, 255, 255);">