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): update demo

Browse Source
This commit is contained in:
陈嘉涵 2020-01-24 10:28:08 +08:00
parent e8f528877f
commit 1dfbc69aef
4 changed files with 194 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/search/README.md
View File

@ -14,7 +14,7 @@ Vue.use(Search);
### Basic Usage ### Basic Usage
```html ```html
<van-search placeholder="Placeholder" v-model="value" /> <van-search v-model="value" placeholder="Placeholder" />
``` ```
```js ```js
@ -24,23 +24,6 @@ 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 ### Listen to Events
@ -50,16 +33,67 @@ export default {
<form action="/"> <form action="/">
<van-search <van-search
v-model="value" v-model="value"
placeholder="Placeholder"
show-action show-action
placeholder="Placeholder"
@search="onSearch" @search="onSearch"
@cancel="onCancel" @cancel="onCancel"
/> />
</form> </form>
``` ```
```js
import { Toast } from 'vant';
export default {
data() {
return {
value: ''
};
},
methods: {
onSearch(val) {
Toast(val);
},
onCancel() {
Toast('Cancel');
}
}
}
```
> Tips: There will be a search button on the keyboard when Search is inside a form in iOS. > Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
### Input Align
```html
<van-search
v-model="value"
input-align="center"
placeholder="Placeholder"
/>
```
### Disabled
```html
<van-search
v-model="value"
disabled
placeholder="Placeholder"
/>
```
### Custom Background Color
```html
<van-search
v-model="value"
shape="round"
background="#4fc08d"
placeholder="Placeholder"
/>
```
### Custom Action Button ### Custom Action Button
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot

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

@ -16,26 +16,7 @@ Vue.use(Search);
v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色 v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色
```html ```html
<van-search placeholder="请输入搜索关键词" v-model="value" /> <van-search v-model="value" placeholder="请输入搜索关键词" />
```
### 自定义背景色
```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"/>
``` ```
### 事件监听 ### 事件监听
@ -46,26 +27,82 @@ Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘
<form action="/"> <form action="/">
<van-search <van-search
v-model="value" v-model="value"
placeholder="请输入搜索关键词"
show-action show-action
placeholder="请输入搜索关键词"
@search="onSearch" @search="onSearch"
@cancel="onCancel" @cancel="onCancel"
/> />
</form> </form>
``` ```
```js
import { Toast } from 'vant';
export default {
data() {
return {
value: ''
};
},
methods: {
onSearch(val) {
Toast(val);
},
onCancel() {
Toast('取消');
}
}
}
```
> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮 > Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
### 自定义按钮 ### 搜索框内容对齐
使用`action`插槽可以自定义右侧按钮的内容。使用插槽后，cancel 事件将不再触发 通过 `input-align` 属性设置搜索框内容的对齐方式，可选值为`center`、`right`
```html ```html
<van-search <van-search
v-model="value" v-model="value"
placeholder="请输入搜索关键词" placeholder="请输入搜索关键词"
show-action input-align="center"
/>
```
### 禁用搜索框
通过`disabled`属性禁用搜索框
```html
<van-search
v-model="value"
disabled
placeholder="请输入搜索关键词"
/>
```
### 自定义背景色
通过`background`属性可以设置搜索框外部的背景色，通过`shape`属性设置搜索框的形状，可选值为`round`
```html
<van-search
v-model="value"
shape="round" shape="round"
background="#4fc08d"
placeholder="请输入搜索关键词"
/>
```
### 自定义按钮
使用`action`插槽可以自定义右侧按钮的内容。使用插槽后，`cancel`事件将不再触发
```html
<van-search
v-model="value"
show-action
placeholder="请输入搜索关键词"
@search="onSearch" @search="onSearch"
> >
<div slot="action" @click="onSearch">搜索</div> <div slot="action" @click="onSearch">搜索</div>
@ -80,7 +117,7 @@ Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘
|------|------|------|------| |------|------|------|------|
| label | 搜索框左侧文本 | *string* | - | | label | 搜索框左侧文本 | *string* | - |
| shape | 搜索框形状，可选值为 `round` | *string* | `square` | | shape | 搜索框形状，可选值为 `round` | *string* | `square` |
| background | 搜索框背景色 | *string* | `#f2f2f2` | | background | 搜索框外部背景色 | *string* | `#f2f2f2` |
| maxlength | 输入的最大字符数 | *string \| number* | - | | maxlength | 输入的最大字符数 | *string \| number* | - |
| placeholder | 占位提示文字 | *string* | - | | placeholder | 占位提示文字 | *string* | - |
| clearable | 是否启用清除控件 | *boolean* | `true` | | clearable | 是否启用清除控件 | *boolean* | `true` |

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

@ -1,25 +1,13 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-search v-model="value" :placeholder="$t('placeholder')" /> <van-search v-model="value1" :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>
<demo-block :title="$t('listenToEvents')"> <demo-block :title="$t('listenToEvents')">
<form action="/"> <form action="/">
<van-search <van-search
v-model="value" v-model="value5"
:placeholder="$t('placeholder')" :placeholder="$t('placeholder')"
show-action show-action
@search="onSearch" @search="onSearch"
@ -28,12 +16,32 @@
</form> </form>
</demo-block> </demo-block>
<demo-block :title="$t('inputAlign')">
<van-search
v-model="value4"
:placeholder="$t('placeholder')"
input-align="center"
/>
</demo-block>
<demo-block :title="$t('disabled')">
<van-search v-model="value3" :placeholder="$t('placeholder')" disabled />
</demo-block>
<demo-block :title="$t('background')">
<van-search
v-model="value2"
:placeholder="$t('placeholder')"
shape="round"
background="#4fc08d"
/>
</demo-block>
<demo-block :title="$t('customButton')"> <demo-block :title="$t('customButton')">
<van-search <van-search
v-model="value" v-model="value6"
:placeholder="$t('placeholder')" :placeholder="$t('placeholder')"
show-action show-action
shape="round"
:label="$t('label')" :label="$t('label')"
@search="onSearch" @search="onSearch"
> >
@ -50,33 +58,38 @@ export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
label: '地址', label: '地址',
disabled: '禁用搜索框',
inputAlign: '搜索框内容对齐',
background: '自定义背景色',
placeholder: '请输入搜索关键词', placeholder: '请输入搜索关键词',
customButton: '自定义按钮', customButton: '自定义按钮',
background: '自定义背景色',
inputAlign: '搜索框内容对齐',
listenToEvents: '事件监听', listenToEvents: '事件监听',
disabled: '禁用搜索框'
}, },
'en-US': { 'en-US': {
label: 'Address', label: 'Address',
disabled: 'Disabled',
inputAlign: 'Input Align',
background: 'Custom Background Color',
placeholder: 'Placeholder', placeholder: 'Placeholder',
customButton: 'Custom Action Button', customButton: 'Custom Action Button',
background: 'Custom Background Color',
inputAlign: 'Search Bar Content Alignment',
listenToEvents: 'Listen to Events', listenToEvents: 'Listen to Events',
disabled: 'Disable Search Bar' },
}
}, },
data() { data() {
return { return {
value: '', value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value6: '',
}; };
}, },
methods: { methods: {
onSearch() { onSearch(val) {
this.$toast(this.value); this.$toast(val);
}, },
onCancel() { onCancel() {

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

@ -15,45 +15,6 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </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> <div>
<form action="/"> <form action="/">
<div class="van-search van-search--show-action" style="background: rgb(255, 255, 255);"> <div class="van-search van-search--show-action" style="background: rgb(255, 255, 255);">
@ -71,8 +32,47 @@ exports[`renders demo correctly 1`] = `
</form> </form>
</div> </div>
<div> <div>
<div class="van-search van-search--show-action" style="background: rgb(255, 255, 255);"> <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="请输入搜索关键词" class="van-field__control van-field__control--center"></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(79, 192, 141);">
<div class="van-search__content van-search__content--round"> <div class="van-search__content van-search__content--round">
<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 van-search--show-action" style="background: rgb(255, 255, 255);">
<div class="van-search__content van-search__content--square">
<div class="van-search__label">地址</div> <div class="van-search__label">地址</div>
<div class="van-cell van-cell--borderless van-field"> <div class="van-cell van-cell--borderless van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-search"> <div class="van-field__left-icon"><i class="van-icon van-icon-search">