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

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: '自定义行动按钮',
+      title3: '高级用法',
-      placeholder: '请输入搜索关键词'
+      placeholder: '请输入搜索关键词',
+      label: '收货地址'
     },
     'en-US': {
       title2: 'Listen to Events',
-      title3: 'Custom Button',
+      title3: 'Advanced Usage',
-      placeholder: 'Placeholder'
+      placeholder: 'Placeholder',
+      label: 'Address'
     }
   },
 

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 |

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,6 +71,8 @@ export default sfc({
 
     return (
       <div class={bem({ 'show-action': showAction })} style={{ background: this.background }}>
+        <div class={bem('content', [this.shape])}>
+          {this.renderLabel()}
           <Field
             clearable
             type="search"
@@ -70,6 +83,7 @@ export default sfc({
             {...props}
           >
           </Field>
+        </div>
         {showAction && (
           <div class={bem('action')}>
             {this.slots('action') || <div onClick={this.onBack}>{t('cancel')}</div>}

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;
+    padding: 5px 10px 5px 0;
-    border-radius: 4px;
+    background-color: transparent;
 
     &__left-icon {
       color: @gray-dark;
@@ -32,8 +51,8 @@
   &__action {
     padding: 0 10px;
     font-size: 14px;
-    line-height: 30px;
+    line-height: 34px;
-    color: @gray-darker;
+    color: @text-color;
 
     &:active {
       background-color: @active-color;

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

@@ -3,7 +3,8 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-search" style="background:#f2f2f2;">
+    <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>
@@ -13,9 +14,11 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div>
     <form action="/">
-      <div class="van-search van-search--show-action" style="background:#f2f2f2;">
+      <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>
@@ -23,6 +26,7 @@ exports[`renders demo correctly 1`] = `
               <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
             </div>
           </div>
+        </div>
         <div class="van-search__action">
           <div>取消</div>
         </div>
@@ -30,7 +34,9 @@ exports[`renders demo correctly 1`] = `
     </form>
   </div>
   <div>
-    <div class="van-search van-search--show-action" style="background:#f2f2f2;">
+    <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>
@@ -38,6 +44,7 @@ exports[`renders demo correctly 1`] = `
             <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
           </div>
         </div>
+      </div>
       <div class="van-search__action">
         <div>
           搜索

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 | 自定义搜索框左侧文本 |

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;