docs(Search): update document (#4414)

src/field/README.zh-CN.md

@@ -17,7 +17,7 @@ Vue.use(Field);
 
 ### 基础用法
 
-通过 v-model 绑定输入框的值
+通过`v-model`绑定输入框的值
 
 ```html
 <van-cell-group>

src/search/README.md

@@ -82,19 +82,20 @@ Search support all native properties of input tag，such as `maxlength`、`place
 
 ### Events
 
-Search support all native events of input tag，such as `focus`、`blur`、`keypress`
-
 | Event | Description | Arguments |
 |------|------|------|
+| search | Triggered when confirm search | value: current value |
+| input | Triggered when input value changed | value: current value |
+| focus | Triggered when input gets focus | event: Event |
+| blur | Triggered when input loses focus | event: Event |
+| clear | Triggered when click clear icon | event: Event |
 | cancel | Triggered when click cancel button | - |
-| search | Triggered when confirm search | - |
-| clear | Triggered when click clear icon | - |
 
 ### Slots
 
 | Name | Description |
 |------|------|
 | label | Custom Search label |
-| action | Custom right button, displayed when `showAction` is true |
+| action | Custom right button, displayed when `show-action` is `true` |
 | left-icon | Custom left icon |
 | right-icon | Custom right icon |

src/search/README.zh-CN.md

@@ -19,7 +19,7 @@ Vue.use(Search);
 <van-search placeholder="请输入搜索关键词" v-model="value" />
 ```
 
-### 监听对应事件
+### 事件监听
 
 `van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
 
@@ -37,7 +37,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
 </form>
 ```
 
-### 自定义行动按钮
+### 自定义按钮
 
 `van-search` 支持自定义右侧取消按钮，使用名字为 action 的插槽即可。使用此插槽以后，原有的 cancel 事件不再生效。
 
@@ -75,19 +75,20 @@ Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pl
 
 ### Events
 
-Search 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等
-
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| cancel | 取消搜索 | - |
+| search | 确定搜索时触发 | value: 输入框当前值 |
-| search | 确定搜索 | - |
+| input | 输入框内容变化时触发 | value: 输入框当前值 |
-| clear | 点击清除按钮后触发 | - |
+| focus | 输入框获得焦点时触发 | event: Event |
+| blur | 输入框失去焦点时触发 | event: Event |
+| clear | 点击清除按钮后触发 | event: Event |
+| cancel | 点击取消按钮时触发 | - |
 
 ### Slots
 
 | 名称 | 说明 |
 |------|------|
 | label | 自定义搜索框左侧文本 |
-| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |
+| action | 自定义搜索框右侧按钮，设置`show-action`属性后展示 |
 | left-icon | 自定义输入框左侧图标 |
 | right-icon | 自定义输入框右侧图标 |

src/search/demo/index.vue

@@ -1,13 +1,10 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-search
+      <van-search v-model="value" :placeholder="$t('placeholder')" />
-        v-model="value"
-        :placeholder="$t('placeholder')"
-      />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="$t('listenToEvents')">
       <form action="/">
         <van-search
           v-model="value"
@@ -19,7 +16,7 @@
       </form>
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="$t('customButton')">
       <van-search
         v-model="value"
         :placeholder="$t('placeholder')"
@@ -40,16 +37,16 @@
 export default {
   i18n: {
     'zh-CN': {
-      title2: '监听对应事件',
+      label: '地址',
-      title3: '高级用法',
       placeholder: '请输入搜索关键词',
-      label: '地址'
+      customButton: '自定义按钮',
+      listenToEvents: '事件监听'
     },
     'en-US': {
-      title2: 'Listen to Events',
+      label: 'Address',
-      title3: 'Advanced Usage',
       placeholder: 'Placeholder',
-      label: 'Address'
+      customButton: 'Custom Button',
+      listenToEvents: 'Listen to Events'
     }
   },
 
@@ -63,6 +60,7 @@ export default {
     onSearch() {
       this.$toast(this.value);
     },
+
     onCancel() {
       this.$toast(this.$t('cancel'));
     }

src/search/index.tsx

@@ -67,9 +67,6 @@ function Search(
     attrs: ctx.data.attrs,
     on: {
       ...ctx.listeners,
-      input(value: string) {
-        emit(ctx, 'input', value);
-      },
       keypress(event: KeyboardEvent) {
         // press enter
         if (event.keyCode === 13) {

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

@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`left-icon prop 1`] = `
+exports[`label slot 1`] = `
 <div class="van-search" style="background: rgb(255, 255, 255);">
   <div class="van-search__content van-search__content--square">
+    <div class="van-search__label">Custom Label</div>
     <div class="van-cell van-cell--borderless van-field">
-      <div class="van-field__left-icon"><i class="van-icon van-icon-setting-o">
+      <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>
@@ -14,12 +15,11 @@ exports[`left-icon prop 1`] = `
 </div>
 `;
 
-exports[`render label slot 1`] = `
+exports[`left-icon prop 1`] = `
 <div class="van-search" style="background: rgb(255, 255, 255);">
   <div class="van-search__content van-search__content--square">
-    <div class="van-search__label">Custom Label</div>
     <div class="van-cell van-cell--borderless van-field">
-      <div class="van-field__left-icon"><i class="van-icon van-icon-search">
+      <div class="van-field__left-icon"><i class="van-icon van-icon-setting-o">
           <!----></i></div>
       <div class="van-cell__value van-cell__value--alone">
         <div class="van-field__body"><input type="search" class="van-field__control"></div>

src/search/test/index.spec.js

@@ -1,7 +1,7 @@
 import Search from '..';
 import { mount } from '../../../test/utils';
 
-test('listen input event', () => {
+test('input event', () => {
   const onInput = jest.fn();
   const wrapper = mount(Search, {
     context: {
@@ -18,7 +18,7 @@ test('listen input event', () => {
   expect(onInput).toHaveBeenCalledWith('1');
 });
 
-test('cancel search', () => {
+test('cancel event', () => {
   const onInput = jest.fn();
   const onCancel = jest.fn();
 
@@ -42,7 +42,7 @@ test('cancel search', () => {
   expect(onCancel).toHaveBeenCalled();
 });
 
-test('emit a search event', () => {
+test('search event', () => {
   const onSearch = jest.fn();
   const onKeypress = jest.fn();
 
@@ -63,7 +63,7 @@ test('emit a search event', () => {
   expect(onKeypress).toHaveBeenCalled();
 });
 
-test('render label slot', () => {
+test('label slot', () => {
   const wrapper = mount(Search, {
     scopedSlots: {
       label() {

src/tag/README.zh-CN.md

@@ -13,7 +13,7 @@ Vue.use(Tag);
 
 ### 基础用法
 
-通过 type 属性控制 Tag 颜色，默认为灰色
+通过`type`属性控制标签颜色，默认为灰色
 
 ```html
 <van-tag>标签</van-tag>

src/tag/index.tsx

@@ -11,8 +11,8 @@ export type TagType = 'default' | 'primary' | 'success' | 'danger';
 export type TagSize = 'large' | 'medium';
 
 export type TagProps = {
+  type: TagType;
   size?: TagSize;
-  type?: TagType;
   mark?: boolean;
   color?: string;
   plain?: boolean;