alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages 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
8 changed files with 40 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/search/demo/index.vue
+2 -9
View File
@@ -19,6 +19,7 @@
<demo-block :title="$t('title3')">
<van-search
v-model="value"
:placeholder="$t('placeholder')"
show-action
@search="onSearch"
>
@@ -34,7 +35,7 @@ export default {
'zh-CN': {
title2: '监听对应事件',
title3: '自定义行动按钮',
placeholder: '请输入商品名称'
placeholder: '请输入搜索关键词'
},
'en-US': {
title2: 'Listen to Events',
@@ -59,11 +60,3 @@ export default {
}
};
</script>
<style lang="postcss">
.demo-search {
.van-search__action div {
padding: 0 10px;
}
}
</style>
packages/search/index.vue
+3 -3
View File
@@ -1,6 +1,5 @@
<template>
<div :class="b({ 'show-action': showAction })" :style="{ background }">
<icon name="search" />
<field
v-bind="$attrs"
v-on="listeners"
@@ -8,10 +7,11 @@
type="search"
:value="value"
:border="false"
left-icon="search"
/>
<div v-if="showAction" :class="b('action')" >
<div v-if="showAction" :class="b('action')">
<slot name="action">
<div :class="b('cancel')" @click="onBack">{{ $t('cancel') }}</div>
<div @click="onBack">{{ $t('cancel') }}</div>
</slot>
</div>
</div>
packages/search/test/__snapshots__/demo.spec.js.snap
+16 -19
View File
@@ -4,15 +4,14 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-search" style="background:#f2f2f2;">
<i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
<!---->
</i>
<div placeholder="请输入商品名称" class="van-cell van-field">
<!---->
<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__value van-cell__value--alone">
<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>
<form action="/">
<div class="van-search van-search--show-action" style="background:#f2f2f2;">
<i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
<!---->
</i>
<div placeholder="请输入商品名称" class="van-cell van-field">
<!---->
<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__value van-cell__value--alone">
<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 class="van-search__action">
<div class="van-search__cancel">取消</div>
<div>取消</div>
</div>
</div>
</form>
</div>
<div>
<div class="van-search van-search--show-action" style="background:#f2f2f2;">
<i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
<!---->
</i>
<div class="van-cell van-field">
<!---->
<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__value van-cell__value--alone">
<div class="van-field__body">
<input type="search" value="" class="van-field__control">
<input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
<!---->
<!---->
<!---->
packages/search/test/index.spec.js
+1 -1
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');
expect(wrapper.emitted('input')[0][0]).toEqual('');
expect(wrapper.emitted('cancel')).toBeTruthy();
packages/search/zh-CN.md
+3 -2
View File
@@ -13,7 +13,7 @@ Vue.use(Search);
`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
```html
<van-search placeholder="请输入商品名称" v-model="value" />
<van-search placeholder="请输入搜索关键词" v-model="value" />
```
#### 监听对应事件
@@ -25,7 +25,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
<form action="/">
<van-search
v-model="value"
placeholder="请输入商品名称"
placeholder="请输入搜索关键词"
show-action
@search="onSearch"
@cancel="onCancel"
@@ -39,6 +39,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
```html
<van-search
v-model="value"
placeholder="请输入搜索关键词"
show-action
@search="onSearch"
>