diff --git a/packages/search/demo/index.vue b/packages/search/demo/index.vue
index 14e0d69ec..f30a7aecd 100644
--- a/packages/search/demo/index.vue
+++ b/packages/search/demo/index.vue
@@ -24,6 +24,8 @@
v-model="value"
:placeholder="$t('placeholder')"
show-action
+ shape="round"
+ :label="$t('label')"
@search="onSearch"
>
Search
@@ -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 |
diff --git a/packages/search/index.js b/packages/search/index.js
index 1d15a8f32..de193915d 100644
--- a/packages/search/index.js
+++ b/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 && (
{this.label}
);
}
},
@@ -60,16 +71,19 @@ export default sfc({
return (
-
-
+
+ {this.renderLabel()}
+
+
+
{showAction && (
{this.slots('action') ||
{t('cancel')}
}
diff --git a/packages/search/index.less b/packages/search/index.less
index e9b9b7c2f..3f07f34ed 100644
--- a/packages/search/index.less
+++ b/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;
diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap
index 51f5381a2..576ebeb14 100644
--- a/packages/search/test/__snapshots__/demo.spec.js.snap
+++ b/packages/search/test/__snapshots__/demo.spec.js.snap
@@ -3,24 +3,28 @@
exports[`renders demo correctly 1`] = `