feat(Search): add action-text prop (#4501)

src/search/README.md

@@ -43,7 +43,7 @@ export default {
 
 > Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
 
-### Custom Button
+### Custom Action Button
 
 Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
 
@@ -66,15 +66,16 @@ Search support all native properties of input tag，such as `maxlength`、`place
 
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
-| label | Search label | *string* | - | - |
-| shape | Shape of input, can be set to `round` | *string* | `square` | - |
-| background | Background color | *string* | `#f2f2f2` | - |
+| label | Left side label | *string* | - | - |
+| shape | Shape of field, can be set to `round` | *string* | `square` | - |
+| background | Background color of field | *string* | `#f2f2f2` | - |
 | clearable | Whether to be clearable | *boolean* | `true` | - |
-| show-action | Whether to show right button | *boolean* | `false` | - |
+| show-action | Whether to show right action button | *boolean* | `false` | - |
+| action-text | Text of action button | *boolean* | `Cancel` | 2.2.2 |
 | disabled | Whether to disable field | *boolean* | `false` | - |
 | 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` | - |
+| input-align | Text align of field, can be set to `center` `right` | *string* | `left` | - |
 | left-icon | Left icon name | *string* | `search` | - |
 | right-icon | Right icon name | *string* | - | - |
 

src/search/README.zh-CN.md

@@ -13,7 +13,7 @@ Vue.use(Search);
 
 ### 基础用法
 
-v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
+v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色
 
 ```html
 <van-search placeholder="请输入搜索关键词" v-model="value" />
@@ -39,7 +39,7 @@ Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘
 
 ### 自定义按钮
 
-`van-search` 支持自定义右侧取消按钮，使用名字为 action 的插槽即可。使用此插槽以后，原有的 cancel 事件不再生效。
+使用`action`插槽可以自定义右侧按钮的内容。使用插槽后，cancel 事件将不再触发
 
 ```html
 <van-search
@@ -66,6 +66,7 @@ Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pl
 | background | 搜索框背景色 | *string* | `#f2f2f2` | - |
 | clearable | 是否启用清除控件 | *boolean* | `true` | - |
 | show-action | 是否在搜索框右侧显示取消按钮 | *boolean* | `false` | - |
+| action-text | 取消按钮文字 | *boolean* | `取消` | 2.2.2 |
 | disabled | 是否禁用输入框 | *boolean* | `false` | - |
 | readonly | 是否将输入框设为只读 | *boolean* | `false` | - |
 | error | 是否将输入内容标红 | *boolean* | `false` | - |

src/search/demo/index.vue

@@ -45,7 +45,7 @@ export default {
     'en-US': {
       label: 'Address',
       placeholder: 'Placeholder',
-      customButton: 'Custom Button',
+      customButton: 'Custom Action Button',
       listenToEvents: 'Listen to Events'
     }
   },

src/search/index.tsx

@@ -17,6 +17,7 @@ export type SearchProps = {
   rightIcon?: string;
   clearable: boolean;
   background: string;
+  actionText?: string;
   showAction?: boolean;
 };
 
@@ -58,7 +59,11 @@ function Search(
 
     return (
       <div class={bem('action')}>
-        {slots.action ? slots.action() : <div onClick={onCancel}>{t('cancel')}</div>}
+        {slots.action ? (
+          slots.action()
+        ) : (
+          <div onClick={onCancel}>{props.actionText || t('cancel')}</div>
+        )}
       </div>
     );
   }
@@ -112,6 +117,7 @@ Search.props = {
   value: String,
   label: String,
   rightIcon: String,
+  actionText: String,
   showAction: Boolean,
   shape: {
     type: String,

src/search/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`action-text prop 1`] = `
+<div class="van-search van-search--show-action" style="background: rgb(255, 255, 255);">
+  <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>
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-field__body"><input type="search" class="van-field__control"></div>
+      </div>
+    </div>
+  </div>
+  <div class="van-search__action">
+    <div>Custom Text</div>
+  </div>
+</div>
+`;
+
 exports[`label slot 1`] = `
 <div class="van-search" style="background: rgb(255, 255, 255);">
   <div class="van-search__content van-search__content--square">

src/search/test/index.spec.js

@@ -104,3 +104,14 @@ test('right-icon slot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('action-text prop', () => {
+  const wrapper = mount(Search, {
+    propsData: {
+      actionText: 'Custom Text',
+      showAction: true
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});