blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-23 15:09:16 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] Search: update style (#1603)

Browse Source
This commit is contained in:
neverland 2018-08-07 14:03:30 +08:00 committed by GitHub
parent 1f67c28998
commit cdc93188ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 40 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/search/demo/index.vue
View File

@ -19,6 +19,7 @@
<demo-block :title="$t('title3')"> <demo-block :title="$t('title3')">
<van-search <van-search
v-model="value" v-model="value"
:placeholder="$t('placeholder')"
show-action show-action
@search="onSearch" @search="onSearch"
> >
@ -34,7 +35,7 @@ export default {
'zh-CN': { 'zh-CN': {
title2: '监听对应事件', title2: '监听对应事件',
title3: '自定义行动按钮', title3: '自定义行动按钮',
placeholder: '请输入商品名称' placeholder: '请输入搜索关键词'
}, },
'en-US': { 'en-US': {
title2: 'Listen to Events', title2: 'Listen to Events',
@ -59,11 +60,3 @@ export default {
} }
}; };
</script> </script>
<style lang="postcss">
.demo-search {
.van-search__action div {
padding: 0 10px;
}
}
</style>

6
packages/search/index.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div :class="b({ 'show-action': showAction })" :style="{ background }"> <div :class="b({ 'show-action': showAction })" :style="{ background }">
<icon name="search" />
<field <field
v-bind="$attrs" v-bind="$attrs"
v-on="listeners" v-on="listeners"
@ -8,10 +7,11 @@
type="search" type="search"
:value="value" :value="value"
:border="false" :border="false"
left-icon="search"
/> />
<div v-if="showAction" :class="b('action')" > <div v-if="showAction" :class="b('action')">
<slot name="action"> <slot name="action">
<div :class="b('cancel')" @click="onBack">{{ $t('cancel') }}</div> <div @click="onBack">{{ $t('cancel') }}</div>
</slot> </slot>
</div> </div>
</div> </div>

35
packages/search/test/__snapshots__/demo.spec.js.snap
View File

@ -4,15 +4,14 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-search" style="background:#f2f2f2;"> <div class="van-search" style="background:#f2f2f2;">
<i class="van-icon van-icon-search" style="color:undefined;size:undefined;"> <div placeholder="请输入搜索关键词" class="van-cell van-field">
<!----> <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;size:undefined;">
</i> <!---->
<div placeholder="请输入商品名称" class="van-cell van-field"> </i>
<!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"> <div class="van-field__body">
<input type="search" placeholder="请输入商品名称" value="" class="van-field__control"> <input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
<!----> <!---->
<!----> <!---->
<!----> <!---->
@ -27,15 +26,14 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<form action="/"> <form action="/">
<div class="van-search van-search--show-action" style="background:#f2f2f2;"> <div class="van-search van-search--show-action" style="background:#f2f2f2;">
<i class="van-icon van-icon-search" style="color:undefined;size:undefined;"> <div placeholder="请输入搜索关键词" class="van-cell van-field">
<!----> <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;size:undefined;">
</i> <!---->
<div placeholder="请输入商品名称" class="van-cell van-field"> </i>
<!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"> <div class="van-field__body">
<input type="search" placeholder="请输入商品名称" value="" class="van-field__control"> <input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
<!----> <!---->
<!----> <!---->
<!----> <!---->
@ -45,22 +43,21 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-search__action"> <div class="van-search__action">
<div class="van-search__cancel">取消</div> <div>取消</div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<div> <div>
<div class="van-search van-search--show-action" style="background:#f2f2f2;"> <div class="van-search van-search--show-action" style="background:#f2f2f2;">
<i class="van-icon van-icon-search" style="color:undefined;size:undefined;"> <div placeholder="请输入搜索关键词" class="van-cell van-field">
<!----> <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;size:undefined;">
</i> <!---->
<div class="van-cell van-field"> </i>
<!---->
<!----> <!---->
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"> <div class="van-field__body">
<input type="search" value="" class="van-field__control"> <input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
<!----> <!---->
<!----> <!---->
<!----> <!---->

2
packages/search/test/index.spec.js
View File

@ -18,7 +18,7 @@ test('cancel search', () => {
} }
}); });
const cancel = wrapper.find('.van-search__cancel'); const cancel = wrapper.find('.van-search__action div');
cancel.trigger('click'); cancel.trigger('click');
expect(wrapper.emitted('input')[0][0]).toEqual(''); expect(wrapper.emitted('input')[0][0]).toEqual('');
expect(wrapper.emitted('cancel')).toBeTruthy(); expect(wrapper.emitted('cancel')).toBeTruthy();

5
packages/search/zh-CN.md
View File

@ -13,7 +13,7 @@ Vue.use(Search);
`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。 `van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
```html ```html
<van-search placeholder="请输入商品名称" v-model="value" /> <van-search placeholder="请输入搜索关键词" v-model="value" />
``` ```
#### 监听对应事件 #### 监听对应事件
@ -25,7 +25,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
<form action="/"> <form action="/">
<van-search <van-search
v-model="value" v-model="value"
placeholder="请输入商品名称" placeholder="请输入搜索关键词"
show-action show-action
@search="onSearch" @search="onSearch"
@cancel="onCancel" @cancel="onCancel"
@ -39,6 +39,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
```html ```html
<van-search <van-search
v-model="value" v-model="value"
placeholder="请输入搜索关键词"
show-action show-action
@search="onSearch" @search="onSearch"
> >

2
packages/vant-css/src/cell.css
View File

@ -38,6 +38,7 @@
&__value { &__value {
overflow: hidden; overflow: hidden;
text-align: right; text-align: right;
position: relative;
vertical-align: middle; vertical-align: middle;
&--alone { &--alone {
@ -46,6 +47,7 @@
} }
&__left-icon { &__left-icon {
min-width: 1em;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
margin-right: 5px; margin-right: 5px;

4
packages/vant-css/src/field.css
View File

@ -5,10 +5,6 @@
max-width: 90px; max-width: 90px;
} }
.van-cell__value {
position: relative;
}
&__body { &__body {
display: flex; display: flex;
align-items: center; align-items: center;

41
packages/vant-css/src/search.css
View File

@ -2,19 +2,22 @@
.van-search { .van-search {
display: flex; display: flex;
padding: 7px 15px;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding: 6px 15px;
position: relative;
&--show-action {
padding-right: 0;
}
.van-cell { .van-cell {
flex: 1; flex: 1;
padding: 3px 10px;
border-radius: 4px; border-radius: 4px;
padding: 3px 10px 3px 35px;
&__left-icon {
color: $gray-dark;
}
}
&--show-action {
padding-right: 0;
} }
input { input {
@ -27,31 +30,13 @@
} }
&__action { &__action {
line-height: 34px;
font-size: 14px;
letter-spacing: 1px;
}
&__cancel {
padding: 0 10px; padding: 0 10px;
color: $green; font-size: 14px;
line-height: 30px;
color: $gray-darker;
&:active { &:active {
background-color: $active-color; background-color: $active-color;
} }
} }
.van-icon-search {
top: 50%;
left: 25px;
z-index: 1;
color: $gray-dark;
position: absolute;
font-size: 16px;
transform: translateY(-50%);
}
.van-icon-clear {
color: #bbb;
}
} }