[new feature] Search: update style & add new prop label shape & add new slot label

+ update style
+ add new prop label & shape
+ add new slot label

example/pages/search/index.wxml

@@ -19,13 +19,15 @@
   />
 </demo-block>
 
-<demo-block title="自定义行动按钮">
+<demo-block title="高级用法">
   <van-search
     value="{{ value }}"
     placeholder="请输入搜索关键词"
     use-action-slot
     bind:change="onChange"
     bind:search="onSearch"
+    label="地址"
+    shape="round"
   >
     <view slot="action" bind:tap="onSearch">搜索</view>
   </van-search>

packages/common/style/var.less

@@ -108,3 +108,6 @@
 
 // iPhoneX
 @safe-area-inset-bottom: 34px;
+
+// Search
+@search-background-color: #f7f8fA;

packages/search/README.md

@@ -4,19 +4,21 @@
 在 app.json 或 index.json 中引入组件
 ```json
 "usingComponents": {
-  "van-search": "/packages/search/index"
+  "van-search": "path/to/vant-weapp/dist/search/index"
 }
 ```
 
+### 代码演示
+
 #### 基础用法
-value 用于控制搜索框中的文字
+`van-search` 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
 
 ```html
 <van-search value="{{ value }}" placeholder="请输入搜索关键词" />
 ```
 
 #### 监听对应事件
-Search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
+`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
 
 ```html
 <van-search
@@ -30,7 +32,7 @@ Search 提供了 search 和 cancel 事件。search 事件在用户点击键盘
 
 #### 自定义行动按钮
 
-Search 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。
+`van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。
 
 ```html
 <van-search
@@ -48,6 +50,8 @@ Search 支持自定义右侧取消按钮，使用名字为 action 的 slot 即
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
 | name | 在表单内提交时的标识符 | `String` | - |
+| label | 搜索框左侧文本 | `String` | - |
+| shape | 形状，可选值为 `round` | `String` | `square` |
 | value | 当前输入的值 | `String | Number` | - |
 | background | 搜索框背景色 | `String` | `#f2f2f2` |
 | show-action | 是否在搜索框右侧显示取消按钮 | `Boolean` | `false` |
@@ -77,6 +81,7 @@ Search 支持自定义右侧取消按钮，使用名字为 action 的 slot 即
 | 名称 | 说明 |
 |-----------|-----------|
 | action | 自定义搜索框右侧按钮，需要在`use-action-slot`为 true 时才会显示 |
+| label | 自定义搜索框左侧文本 |
 
 ### 外部样式类
 

packages/search/index.less

@@ -2,13 +2,30 @@
 
 .van-search {
   display: flex;
-  padding: 7px 15px;
+  padding: 10px 16px;
   align-items: center;
   box-sizing: border-box;
 
+  &__content {
+    display: flex;
+    padding-left: 10px;
+    background-color: @search-background-color;
+    border-radius: 2px;
+    flex: 1;
+
+    &--round {
+      border-radius: 17px;
+    }
+  }
+
+  &__label {
+    padding: 0 5px;
+    font-size: 14px;
+    line-height: 34px;
+    color: @text-color;
+  }
+
   &__field {
-    overflow: hidden;
-    border-radius: 4px;
     flex: 1;
 
     &__left-icon {
@@ -16,7 +33,7 @@
     }
   }
 
-  &--show-action {
+  &--withaction {
     padding-right: 0;
   }
 
@@ -32,8 +49,8 @@
   &__action {
     padding: 0 10px;
     font-size: 14px;
-    line-height: 30px;
+    line-height: 34px;
-    color: @gray-darker;
+    color: @text-color;
 
     &--hover {
       background-color: @active-color;

packages/search/index.ts

@@ -17,12 +17,17 @@ VantComponent({
     placeholderStyle: String,
     background: {
       type: String,
-      value: '#f2f2f2'
+      value: '#ffffff'
     },
     maxlength: {
       type: Number,
       value: -1
-    }
+    },
+    shape: {
+      type: String,
+      value: 'square'
+    },
+    label: String
   },
 
   methods: {

packages/search/index.wxml

@@ -1,31 +1,39 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="van-search custom-class {{ showAction || useActionSlot ? 'van-search--show-action' : '' }}"
+  class="{{ utils.bem('search', { withaction: showAction || useActionSlot }) }} custom-class"
   style="background: {{ background }}"
 >
-  <van-field
+  <view class="{{ utils.bem('search__content', [shape]) }}">
-    clearable
+    <view class="van-search__label" wx:if="{{ label }}">{{ label }}</view>
-    type="search"
+    <slot wx:else name="label" />
-    left-icon="search"
+
-    focus="{{ focus }}"
+    <van-field
-    error="{{ error }}"
+      clearable
-    border="{{ false }}"
+      type="search"
-    confirm-type="search"
+      left-icon="search"
-    class="van-search__field field-class"
+      focus="{{ focus }}"
-    value="{{ value }}"
+      error="{{ error }}"
-    disabled="{{ disabled }}"
+      border="{{ false }}"
-    readonly="{{ readonly }}"
+      confirm-type="search"
-    maxlength="{{ maxlength }}"
+      class="van-search__field field-class"
-    input-align="{{ inputAlign }}"
+      value="{{ value }}"
-    input-class="input-class"
+      disabled="{{ disabled }}"
-    placeholder="{{ placeholder }}"
+      readonly="{{ readonly }}"
-    placeholder-style="{{ placeholderStyle }}"
+      maxlength="{{ maxlength }}"
-    custom-style="padding: 3px 10px"
+      input-align="{{ inputAlign }}"
-    bind:blur="onBlur"
+      input-class="input-class"
-    bind:focus="onFocus"
+      placeholder="{{ placeholder }}"
-    bind:change="onChange"
+      placeholder-style="{{ placeholderStyle }}"
-    bind:confirm="onSearch"
+      custom-style="padding: 5px 10px 5px 0; background-color: transparent;"
-    bind:clear="onClear"
+      bind:blur="onBlur"
-  />
+      bind:focus="onFocus"
+      bind:change="onChange"
+      bind:confirm="onSearch"
+      bind:clear="onClear"
+    />
+  </view>
+
   <view
     wx:if="{{ showAction || useActionSlot }}"
     class="van-search__action"