From 52a4b7eec9be55a6f110dc5dc061bf5ad0c1265b Mon Sep 17 00:00:00 2001 From: rex Date: Tue, 19 Feb 2019 11:32:05 +0800 Subject: [PATCH] =?UTF-8?q?[new=20feature]=20Search:=20update=20style,=20a?= =?UTF-8?q?dd=20new=20prop=20shape=E3=80=81label=20(#2788)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/search/demo/index.vue | 12 ++++-- packages/search/en-US.md | 4 ++ packages/search/index.js | 38 ++++++++++------ packages/search/index.less | 29 ++++++++++--- .../test/__snapshots__/demo.spec.js.snap | 43 +++++++++++-------- packages/search/zh-CN.md | 4 ++ packages/style/var.less | 3 ++ 7 files changed, 94 insertions(+), 39 deletions(-) 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`] = `
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
@@ -30,12 +34,15 @@ exports[`renders demo correctly 1`] = `
-
-
-
-
-
-
+
+
+
收货地址
+
+
+
+
+
+
diff --git a/packages/search/zh-CN.md b/packages/search/zh-CN.md index 4efbc75a9..0e2599255 100644 --- a/packages/search/zh-CN.md +++ b/packages/search/zh-CN.md @@ -41,6 +41,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即 v-model="value" placeholder="请输入搜索关键词" show-action + shape="round" @search="onSearch" >
搜索
@@ -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 | 自定义搜索框左侧文本 | diff --git a/packages/style/var.less b/packages/style/var.less index edd33aa1c..72e870d7a 100644 --- a/packages/style/var.less +++ b/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;