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

[new feature] Search: update style, add new prop shape、label ()

Browse Source
This commit is contained in:
rex 2019-02-19 11:32:05 +08:00 committed by neverland
parent 07a6bcbe9f
commit 52a4b7eec9
7 changed files with 94 additions and 39 deletions

12
packages/search/demo/index.vue

@ -24,6 +24,8 @@
v-model="value"
:placeholder="$t('placeholder')"
show-action
shape="round"
:label="$t('label')"
@search="onSearch"
>
<div
@ -42,13 +44,15 @@ export default {
i18n: {
'zh-CN': {
title2: '监听对应事件',
title3: '自定义行动按钮',
placeholder: '请输入搜索关键词'
title3: '高级用法',
placeholder: '请输入搜索关键词',
label: '收货地址'
},
'en-US': {
title2: 'Listen to Events',
title3: 'Custom Button',
placeholder: 'Placeholder'
title3: 'Advanced Usage',
placeholder: 'Placeholder',
label: 'Address'
}
},

4
packages/search/en-US.md

@ -49,6 +49,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
<van-search
v-model="value"
show-action
shape="round"
@search="onSearch"
>
<div slot="action" @click="onSearch">Search</div>
@ -67,6 +68,8 @@ Search support all native properties of input tag，such as `maxlength`、`place
| readonly | Whether to be readonly | `Boolean` | `false` |
| error | Whether to show error info | `Boolean` | `false` |
| input-align | Input text align, can be set to `center` `right` | `String` | `left` |
| shape | Can be set to `round` | `String` | `square` |
| label | Search label | `String` | - |
### Event
@ -84,3 +87,4 @@ Search support all native events of input tag，such as `focus`、`blur`、`keyp
|------|------|
| action | Custom right button, displayed when `showAction` is true |
| left-icon | Custom left icon |
| label | Custom Search label |

38
packages/search/index.js

@ -9,10 +9,15 @@ export default sfc({
props: {
value: String,
showAction: Boolean,
shape: {
type: String,
default: 'square'
},
background: {
type: String,
default: '#f2f2f2'
}
default: '#ffffff'
},
label: String
},
computed: {
@ -42,6 +47,12 @@ export default sfc({
onBack() {
this.$emit('input', '');
this.$emit('cancel');
},
renderLabel() {
return this.slots('label')
? this.slots('label')
: this.label && (<div class={bem('label')}>{this.label}</div>);
}
},
@ -60,16 +71,19 @@ export default sfc({
return (
<div class={bem({ 'show-action': showAction })} style={{ background: this.background }}>
<Field
clearable
type="search"
value={this.value}
border={false}
leftIcon="search"
scopedSlots={scopedSlots}
{...props}
>
</Field>
<div class={bem('content', [this.shape])}>
{this.renderLabel()}
<Field
clearable
type="search"
value={this.value}
border={false}
leftIcon="search"
scopedSlots={scopedSlots}
{...props}
>
</Field>
</div>
{showAction && (
<div class={bem('action')}>
{this.slots('action') || <div onClick={this.onBack}>{t('cancel')}</div>}

29
packages/search/index.less

@ -2,14 +2,33 @@
.van-search {
display: flex;
padding: 7px 15px;
padding: 10px 16px;
align-items: center;
box-sizing: border-box;
&__content {
display: flex;
flex: 1;
background-color: @search-background-color;
border-radius: 2px;
padding-left: 10px;
&--round {
border-radius: 17px;
}
}
&__label {
font-size: 14px;
color: @text-color;
line-height: 34px;
padding: 0 5px;
}
.van-cell {
flex: 1;
padding: 3px 10px;
border-radius: 4px;
padding: 5px 10px 5px 0;
background-color: transparent;
&__left-icon {
color: @gray-dark;
@ -32,8 +51,8 @@
&__action {
padding: 0 10px;
font-size: 14px;
line-height: 30px;
color: @gray-darker;
line-height: 34px;
color: @text-color;
&:active {
background-color: @active-color;

43
packages/search/test/__snapshots__/demo.spec.js.snap

@ -3,24 +3,28 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-search" style="background:#f2f2f2;">
<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="请输入搜索关键词" value="" class="van-field__control"></div>
<div class="van-search" style="background:#ffffff;">
<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="请输入搜索关键词" value="" class="van-field__control"></div>
</div>
</div>
</div>
</div>
</div>
<div>
<form action="/">
<div class="van-search van-search--show-action" style="background:#f2f2f2;">
<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="请输入搜索关键词" value="" class="van-field__control"></div>
<div class="van-search van-search--show-action" style="background:#ffffff;">
<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="请输入搜索关键词" value="" class="van-field__control"></div>
</div>
</div>
</div>
<div class="van-search__action">
@ -30,12 +34,15 @@ exports[`renders demo correctly 1`] = `
</form>
</div>
<div>
<div class="van-search van-search--show-action" style="background:#f2f2f2;">
<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="请输入搜索关键词" value="" class="van-field__control"></div>
<div class="van-search van-search--show-action" style="background:#ffffff;">
<div class="van-search__content van-search__content--round">
<div class="van-search__label">收货地址</div>
<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="请输入搜索关键词" value="" class="van-field__control"></div>
</div>
</div>
</div>
<div class="van-search__action">

4
packages/search/zh-CN.md

@ -41,6 +41,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
v-model="value"
placeholder="请输入搜索关键词"
show-action
shape="round"
@search="onSearch"
>
<div slot="action" @click="onSearch">搜索</div>
@ -59,6 +60,8 @@ Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pl
| readonly | 是否只读 | `Boolean` | `false` | - |
| error | 是否将输入内容标红 | `Boolean` | `false` | - |
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` | - |
| shape | 形状，可选值为 `round` | `String` | `square` | - |
| label | 搜索框左侧文本 | `String` | - | - |
### Event
@ -76,3 +79,4 @@ Search 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`
|------|------|
| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |
| left-icon | 自定义输入框头部图标 |
| label | 自定义搜索框左侧文本 |

3
packages/style/var.less

@ -145,3 +145,6 @@
@toast-default-min-height: 90px;
@toast-position-top-distance: 50px;
@toast-position-bottom-distance: 50px;
// Search
@search-background-color: #f7f8fA;