Merge branch 'dev' into next

src/address-edit/README.md

@@ -113,7 +113,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get AddressEdit instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get AddressEdit instance and call instance methods.
 
 | Name             | Description        | Attribute             | Return value |
 | ---------------- | ------------------ | --------------------- | ------------ |

src/address-edit/README.zh-CN.md

@@ -113,7 +113,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名           | 说明         | 参数                  | 返回值 |
 | ---------------- | ------------ | --------------------- | ------ |

src/area/README.md

@@ -90,7 +90,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods.
 
 | Name  | Description               | Attribute     | Return value |
 | ----- | ------------------------- | ------------- | ------------ |

src/area/README.zh-CN.md

@@ -90,7 +90,7 @@ app.use(Area);
 
 ### 方法
 
-通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/calendar/README.md

@@ -313,7 +313,7 @@ Following props are supported when the type is multiple
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods.
 
 | Name  | Description                         | Attribute | Return value |
 | ----- | ----------------------------------- | --------- | ------------ |

src/calendar/README.zh-CN.md

@@ -317,7 +317,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明                   | 参数 | 返回值 |
 | ------ | ---------------------- | ---- | ------ |

src/checkbox/README.md

@@ -265,7 +265,7 @@ export default {
 
 ### CheckboxGroup Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
@@ -273,7 +273,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call
 
 ### Checkbox Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call instance methods.
 
 | Name   | Description         | Attribute           | Return value |
 | ------ | ------------------- | ------------------- | ------------ |

src/checkbox/README.zh-CN.md

@@ -285,7 +285,7 @@ export default {
 
 ### CheckboxGroup 方法
 
-通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -293,7 +293,7 @@ export default {
 
 ### Checkbox 方法
 
-通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/collapse-item/index.js

@@ -5,6 +5,7 @@ import { raf, doubleRaf, createNamespace } from '../utils';
 
 // Composition
 import { useParent } from '@vant/use';
+import { useExpose } from '../composition/use-expose';
 import { useLazyRender } from '../composition/use-lazy-render';
 
 // Components
@@ -82,9 +83,13 @@ export default createComponent({
       });
     });
 
+    const toggle = (value = !expanded.value) => {
+      parent.toggle(currentName.value, value);
+    };
+
     const onClickTitle = () => {
       if (!props.disabled) {
-        parent.toggle(currentName.value, !expanded.value);
+        toggle();
       }
     };
 
@@ -126,6 +131,8 @@ export default createComponent({
       </div>
     ));
 
+    useExpose({ toggle });
+
     return () => (
       <div class={[bem({ border: index.value && props.border })]}>
         {renderTitle()}

src/collapse/README.md

@@ -127,3 +127,11 @@ export default {
 | icon       | Custom icon       |
 | title      | Custom title      |
 | right-icon | Custom right icon |
+
+### CollapseItem Methods
+
+Use [ref](https://vuejs.org/v2/api/#ref) to get CollapseItem instance and call instance methods.
+
+| Name | Description | Attribute | Return value |
+| --- | --- | --- | --- |
+| toggle `v2.10.9` | Toggle expanded status | _expanded: boolean_ | - |

src/collapse/README.zh-CN.md

@@ -1,5 +1,9 @@
 # Collapse 折叠面板
 
+### 介绍
+
+将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。
+
 ### 引入
 
 ```js
@@ -118,10 +122,18 @@ export default {
 
 ### CollapseItem Slots
 
-| 名称       | 说明                          |
-| ---------- | ----------------------------- |
-| default    | 面板内容                      |
-| value      | 自定义显示内容                |
-| icon       | 自定义`icon`                  |
-| title      | 自定义`title`                 |
-| right-icon | 自定义右侧按钮，默认是`arrow` |
+| 名称       | 说明                           |
+| ---------- | ------------------------------ |
+| default    | 面板内容                       |
+| value      | 自定义显示内容                 |
+| icon       | 自定义 `icon`                  |
+| title      | 自定义 `title`                 |
+| right-icon | 自定义右侧按钮，默认是 `arrow` |
+
+### CollapseItem 方法
+
+通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| toggle `v2.10.9` | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expand?: boolean_ | - |

src/collapse/test/index.spec.js

@@ -144,3 +144,61 @@ test('warn when value type is incorrect', () => {
   expect(error).toHaveBeenCalledTimes(1);
   console.error = originConsoleError;
 });
+
+test('toggle method', (done) => {
+  mount({
+    template: `
+    <van-collapse v-model="active" >
+      <van-collapse-item name="a" ref="a" />
+      <van-collapse-item name="b" ref="b" />
+    </van-collapse>
+  `,
+    data() {
+      return { active: [] };
+    },
+    mounted() {
+      this.$refs.a.toggle();
+      expect(this.active).toEqual(['a']);
+
+      this.$refs.b.toggle();
+      expect(this.active).toEqual(['a', 'b']);
+
+      this.$refs.b.toggle(false);
+      expect(this.active).toEqual(['a']);
+
+      this.$refs.a.toggle();
+      expect(this.active).toEqual([]);
+
+      done();
+    },
+  });
+});
+
+test('toggle method in accordion mode', (done) => {
+  mount({
+    template: `
+    <van-collapse v-model="active" accordion>
+      <van-collapse-item name="a" ref="a" />
+      <van-collapse-item name="b" ref="b" />
+    </van-collapse>
+  `,
+    data() {
+      return { active: '' };
+    },
+    mounted() {
+      this.$refs.a.toggle();
+      expect(this.active).toEqual('a');
+
+      this.$refs.b.toggle();
+      expect(this.active).toEqual('b');
+
+      this.$refs.b.toggle(false);
+      expect(this.active).toEqual('');
+
+      this.$refs.a.toggle();
+      expect(this.active).toEqual('a');
+
+      done();
+    },
+  });
+});

src/count-down/README.md

@@ -157,7 +157,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods.
 
 | Name  | Description      | Attribute | Return value |
 | ----- | ---------------- | --------- | ------------ |

src/count-down/README.zh-CN.md

@@ -167,7 +167,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/datetime-picker/README.md

@@ -295,7 +295,7 @@ Following props are supported when the type is time
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods.
 
 | Name               | Description         | Attribute | Return value |
 | ------------------ | ------------------- | --------- | ------------ |

src/datetime-picker/README.zh-CN.md

@@ -304,7 +304,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/dropdown-menu/README.md

@@ -164,11 +164,11 @@ Use `active-color` prop to custom active color of the title and options.
 
 ### DropdownItem Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get DropdownItem instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get DropdownItem instance and call instance methods.
 
-| Name   | Description    | Attribute     | Return value |
-| ------ | -------------- | ------------- | ------------ |
-| toggle | Toggle display | show: boolean | -            |
+| Name   | Description    | Attribute       | Return value |
+| ------ | -------------- | --------------- | ------------ |
+| toggle | Toggle display | _show: boolean_ | -            |
 
 ### Data Structure of Option
 

src/dropdown-menu/README.zh-CN.md

@@ -1,5 +1,9 @@
 # DropdownMenu 下拉菜单
 
+### 介绍
+
+向下弹出的菜单列表。
+
 ### 引入
 
 ```js
@@ -168,11 +172,11 @@ export default {
 
 ### DropdownItem 方法
 
-通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - |
+| toggle | 切换菜单展示状态，传 `true` 为显示，`false` 为隐藏，不传参为取反 | _show?: boolean_ | - |
 
 ### Option 数据结构
 

src/field/README.md

@@ -271,7 +271,7 @@ Field support all native events of input tag
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods.
 
 | Name  | Description         | Attribute | Return value |
 | ----- | ------------------- | --------- | ------------ |

src/field/README.zh-CN.md

@@ -294,7 +294,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明           | 参数 | 返回值 |
 | ------ | -------------- | ---- | ------ |

src/field/index.js

@@ -240,10 +240,15 @@ export default createComponent({
     const updateValue = (value, trigger = 'onChange') => {
       value = isDef(value) ? String(value) : '';
 
-      // native maxlength not work when type is number
-      const { maxlength } = props;
+      // native maxlength have incorrect line-break counting
+      // see: https://github.com/youzan/vant/issues/5033
+      const { maxlength, modelValue } = props;
       if (isDef(maxlength) && value.length > maxlength) {
-        value = value.slice(0, maxlength);
+        if (modelValue && modelValue.length === +maxlength) {
+          value = modelValue;
+        } else {
+          value = value.slice(0, maxlength);
+        }
       }
 
       if (props.type === 'number' || props.type === 'digit') {

src/field/test/index.spec.js

@@ -171,17 +171,25 @@ test('maxlength', async () => {
       value: 1234,
       type: 'number',
     },
+    listeners: {
+      input(value) {
+        wrapper && wrapper.setProps({ value });
+      },
+    },
   });
 
   const input = wrapper.find('input');
   expect(input.element.value).toEqual('123');
 
   input.element.value = 1234;
-  await later();
   input.trigger('input');
-
   expect(input.element.value).toEqual('123');
   expect(wrapper.emitted('input')[0][0]).toEqual('123');
+
+  // see: https://github.com/youzan/vant/issues/7265
+  input.element.value = 1423;
+  input.trigger('input');
+  expect(input.element.value).toEqual('123');
 });
 
 test('clearable prop', () => {

src/form/README.md

@@ -467,7 +467,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/form/README.zh-CN.md

@@ -508,7 +508,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/grid-item/index.less

@@ -20,7 +20,8 @@
     color: @grid-item-text-color;
     font-size: @grid-item-text-font-size;
     line-height: 1.5;
-    word-wrap: break-word;
+    // https://github.com/youzan/vant/issues/3894
+    word-break: break-all;
   }
 
   &__icon + &__text {

src/list/README.md

@@ -163,7 +163,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance methods.
 
 | Name  | Description           | Attribute | Return value |
 | ----- | --------------------- | --------- | ------------ |

src/list/README.zh-CN.md

@@ -178,7 +178,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/locale/README.md

@@ -4,18 +4,20 @@
 
 The default language of Vant is Chinese. If you want to use other languages, you can follow the instructions below.
 
+## Usage
+
 ### Switch languages
 
 Vant supports multiple languages with the Locale component, and the `Locale.use` method allows you to switch to different languages.
 
 ```js
 import { Locale } from 'vant';
-import enUS from 'vant/lib/locale/lang/en-US';
+import enUS from 'vant/es/locale/lang/en-US';
 
 Locale.use('en-US', enUS);
 ```
 
-### Modify default configs
+### Override default configs
 
 Use `Locale.add` method to modify the default configs.
 
@@ -52,3 +54,7 @@ Current supported languages:
 | Turkish                  | tr-TR        |
 
 > View all language configs [Here](https://github.com/youzan/vant/tree/dev/src/locale/lang).
+
+### Add new language
+
+If you can’t find the language you need, please send us a Pull Request to add the new language pack, you can refer to [Add German language pack](https://github.com/youzan/vant/pull/7245) PR.

src/locale/README.zh-CN.md

@@ -2,7 +2,9 @@
 
 ### 介绍
 
-Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案。
+Vant 采用中文作为默认语言，同时支持多语言切换，请按照下方教程进行国际化设置。
+
+## 使用方法
 
 ### 多语言切换
 
@@ -10,12 +12,13 @@ Vant 通过 Locale 组件实现多语言支持，使用 `Locale.use` 方法可
 
 ```js
 import { Locale } from 'vant';
-import enUS from 'vant/lib/locale/lang/en-US';
+// 引入英文语言包
+import enUS from 'vant/es/locale/lang/en-US';
 
 Locale.use('en-US', enUS);
 ```
 
-### 修改默认文案
+### 覆盖语言包
 
 通过 `Locale.add` 方法可以实现文案的修改和扩展，示例如下：
 
@@ -33,7 +36,7 @@ const messages = {
 Locale.add(messages);
 ```
 
-### 配置文件
+### 语言包
 
 目前支持的语言:
 
@@ -51,8 +54,22 @@ Locale.add(messages);
 | 罗马尼亚语     | ro-RO        |
 | 挪威语         | nb-NO        |
 
-> 在 [这里](https://github.com/youzan/vant/tree/dev/src/locale/lang) 查看所有的 i18n 配置文件。
+> 在 [这里](https://github.com/youzan/vant/tree/dev/src/locale/lang) 查看所有的语言包源文件。
 
-### Sku 组件
+## 常见问题
+
+### 找不到所需的语言包？
+
+如果上方列表中没有你需要的语言，欢迎给我们提 Pull Request 来增加新的语言包，改动内容可以参考[增加德语语言包](https://github.com/youzan/vant/pull/7245) 的 PR。
+
+### 业务代码如何实现国际化？
+
+可以使用 [vue-i18n](https://github.com/kazupon/vue-i18n) 来实现。
+
+### 以 CDN 形式引入时，如何使用语言包？
+
+目前没有提供 CDN 形式的语言包，可以手动拷贝语言包的内容来使用。
+
+### 语言包中不包含 Sku 组件？
 
 语言包中默认不包含 Sku 业务组件的语言配置，因此如果有 Sku 组件的国际化需求，请自行配置国际化文案。

src/number-keyboard/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-数字虚拟键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用。
+虚拟数字键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用。
 
 ### 引入
 

src/pagination/README.md

@@ -45,7 +45,7 @@ export default {
 />
 ```
 
-### Custom Render
+### Custom Button
 
 ```html
 <van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
@@ -83,8 +83,8 @@ export default {
 
 ### Slots
 
-| Name | Description | Default |
+| Name | Description | SlotProps |
 | --- | --- | --- |
-| prev-text | custom prev slot | `-` |
-| next-text | custom next slot | `-` |
-| page | pagination item slot | `{ number: number, text: string, active: boolean }` |
+| page `v2.10.9` | Custom pagination item | _{ number: number, text: string, active: boolean }_ |
+| prev-text `v2.10.9` | Custom prev text | `-` |
+| next-text `v2.10.9` | Custom next text | `-` |

src/pagination/README.zh-CN.md

@@ -14,6 +14,8 @@ app.use(Pagination);
 
 ### 基础用法
 
+通过 `v-model` 来绑定当前页码。
+
 ```html
 <van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
 ```
@@ -30,12 +32,16 @@ export default {
 
 ### 简单模式
 
+ 将 `mode` 设置为 `simple` 来切换到简单模式，此时分页器不会展示具体的页码按钮。
+
 ```html
 <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
 ```
 
 ### 显示省略号
 
+设置 `force-ellipses` 后会展示省略号按钮，点击后可以快速跳转。
+
 ```html
 <van-pagination
   v-model="currentPage"
@@ -45,7 +51,9 @@ export default {
 />
 ```
 
-### 自定义渲染
+### 自定义按钮
+
+通过 `prev-text`、`next-text` 等插槽来自定义分页按钮的内容。
 
 ```html
 <van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
@@ -83,8 +91,8 @@ export default {
 
 ### Slots
 
-| 名称 | 描述 | 默认值 |
+| 名称 | 描述 | SlotProps |
 | --- | --- | --- |
-| prev-text | 自定义上一页插槽 | `-` |
-| next-text | 自定义下一页插槽 | `-` |
-| page | 自定义页码插槽 | `{ number: number, text: string, active: boolean }` |
+| page `v2.10.9` | 自定义页码 | _{ number: number, text: string, active: boolean }_ |
+| prev-text `v2.10.9` | 自定义上一页按钮文字 | `-` |
+| next-text `v2.10.9` | 自定义下一页按钮文字 | `-` |

src/pagination/demo/index.vue

@@ -56,14 +56,14 @@ export default {
     'zh-CN': {
       title2: '简单模式',
       title3: '显示省略号',
-      title4: '自定义渲染',
+      title4: '自定义按钮',
       prevText: '上一页',
       nextText: '下一页',
     },
     'en-US': {
       title2: 'Simple Mode',
       title3: 'Show ellipses',
-      title4: 'Custom Render',
+      title4: 'Custom Button',
       prevText: 'Prev',
       nextText: 'Next',
     },

src/password-input/README.md

@@ -20,18 +20,14 @@ app.use(NumberKeyboard);
 ### Basic Usage
 
 ```html
-<!-- PasswordInput -->
 <van-password-input
   :value="value"
-  info="Some tips"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
-<!-- NumberKeyboard -->
 <van-number-keyboard
+  v-model="value"
   :show="showKeyboard"
-  @input="onInput"
-  @delete="onDelete"
   @blur="showKeyboard = false"
 />
 ```
@@ -44,30 +40,32 @@ export default {
       showKeyboard: true,
     };
   },
-  methods: {
-    onInput(key) {
-      this.value = (this.value + key).slice(0, 6);
-    },
-    onDelete() {
-      this.value = this.value.slice(0, this.value.length - 1);
-    },
-  },
 };
 ```
 
-### Custom length
+### Custom Length
 
 ```html
 <van-password-input
   :value="value"
-  :length="4"
   :gutter="15"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
 ```
 
-### Without mask
+### Add Gutter
+
+```html
+<van-password-input
+  :value="value"
+  :gutter="10"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+```
+
+### Without Mask
 
 ```html
 <van-password-input
@@ -80,22 +78,19 @@ export default {
 
 ### Hint Error
 
-Use `error-info` prop to set error message. For example, a password error is prompted when entering 6 bits.
+Use `info` to set info message, use `error-info` prop to set error message.
 
 ```html
-<!-- PasswordInput -->
 <van-password-input
   :value="value"
+  info="Some tips"
   :error-info="errorInfo"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
-
-<!-- NumberKeyboard -->
 <van-number-keyboard
+  v-model="value"
   :show="showKeyboard"
-  @input="onInput"
-  @delete="onDelete"
   @blur="showKeyboard = false"
 />
 ```
@@ -105,22 +100,18 @@ export default {
   data() {
     return {
       value: '123',
-      showKeyboard: true,
       errorInfo: '',
+      showKeyboard: true,
     };
   },
-  methods: {
-    onInput(key) {
-      this.value = (this.value + key).slice(0, 6);
-      if (this.value.length === 6) {
+  watch: {
+    value(value) {
+      if (value.length === 6 && value !== '123456') {
         this.errorInfo = 'Password Mistake';
       } else {
         this.errorInfo = '';
       }
     },
-    onDelete() {
-      this.value = this.value.slice(0, this.value.length - 1);
-    },
   },
 };
 ```

src/password-input/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。
+带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。
 
 ### 引入
 
@@ -19,19 +19,19 @@ app.use(NumberKeyboard);
 
 ### 基础用法
 
+搭配数字键盘组件来实现密码输入功能。
+
 ```html
 <!-- 密码输入框 -->
 <van-password-input
   :value="value"
-  info="密码为 6 位数字"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
 <!-- 数字键盘 -->
 <van-number-keyboard
+  v-model="value"
   :show="showKeyboard"
-  @input="onInput"
-  @delete="onDelete"
   @blur="showKeyboard = false"
 />
 ```
@@ -44,24 +44,30 @@ export default {
       showKeyboard: true,
     };
   },
-  methods: {
-    onInput(key) {
-      this.value = (this.value + key).slice(0, 6);
-    },
-    onDelete() {
-      this.value = this.value.slice(0, this.value.length - 1);
-    },
-  },
 };
 ```
 
 ### 自定义长度
 
+通过 `length` 属性来设置密码长度。
+
 ```html
 <van-password-input
   :value="value"
   :length="4"
-  :gutter="15"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+```
+
+### 格子间距
+
+通过 `gutter` 属性来设置格子之间的间距。
+
+```html
+<van-password-input
+  :value="value"
+  :gutter="10"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
@@ -69,6 +75,8 @@ export default {
 
 ### 明文展示
 
+将 `mask` 设置为 `false` 可以明文展示输入的内容，适用于短信验证码等场景。
+
 ```html
 <van-password-input
   :value="value"
@@ -78,23 +86,21 @@ export default {
 />
 ```
 
-### 错误提示
+### 提示信息
 
-通过 `error-info` 属性可以设置错误提示信息，例如当输入六位时提示密码错误。
+通过 `info` 属性设置提示信息，通过 `error-info` 属性设置错误提示，例如当输入六位时提示密码错误。
 
 ```html
-<!-- 密码输入框 -->
 <van-password-input
   :value="value"
+  info="密码为 6 位数字"
   :error-info="errorInfo"
   :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
-<!-- 数字键盘 -->
 <van-number-keyboard
+  v-model="value"
   :show="showKeyboard"
-  @input="onInput"
-  @delete="onDelete"
   @blur="showKeyboard = false"
 />
 ```
@@ -104,22 +110,18 @@ export default {
   data() {
     return {
       value: '123',
-      showKeyboard: true,
       errorInfo: '',
+      showKeyboard: true,
     };
   },
-  methods: {
-    onInput(key) {
-      this.value = (this.value + key).slice(0, 6);
-      if (this.value.length === 6) {
+  watch: {
+    value(value) {
+      if (value.length === 6 && value !== '123456') {
         this.errorInfo = '密码错误';
       } else {
         this.errorInfo = '';
       }
     },
-    onDelete() {
-      this.value = this.value.slice(0, this.value.length - 1);
-    },
   },
 };
 ```

src/password-input/demo/index.vue

@@ -1,48 +1,56 @@
 <template>
   <demo-section>
-    <demo-block :title="t('basicUsage')">
+    <demo-block ref="basicUsage" :title="t('basicUsage')">
       <van-password-input
-        :value="value1"
-        :info="t('info')"
-        :focused="keyboard === 'value1'"
-        @focus="keyboard = 'value1'"
-      />
-
-      <van-number-keyboard
-        :show="!!keyboard"
-        @input="onInput"
-        @delete="onDelete"
-        @blur="keyboard = ''"
+        :value="value.basicUsage"
+        :focused="current === 'basicUsage'"
+        @focus="current = 'basicUsage'"
       />
     </demo-block>
 
-    <demo-block :title="t('customLength')">
+    <demo-block ref="customLength" :title="t('customLength')">
       <van-password-input
-        :value="value2"
+        :value="value.customLength"
         :length="4"
-        gutter="15"
-        :focused="keyboard === 'value2'"
-        @focus="keyboard = 'value2'"
+        :focused="current === 'customLength'"
+        @focus="current = 'customLength'"
       />
     </demo-block>
 
-    <demo-block :title="t('removeMask')">
+    <demo-block ref="addGutter" :title="t('addGutter')">
+      <van-password-input
+        :value="value.addGutter"
+        :gutter="10"
+        :focused="current === 'addGutter'"
+        @focus="current = 'addGutter'"
+      />
+    </demo-block>
+
+    <demo-block ref="removeMask" :title="t('removeMask')">
       <van-password-input
-        :value="value3"
         :mask="false"
-        :focused="keyboard === 'value3'"
-        @focus="keyboard = 'value3'"
+        :value="value.removeMask"
+        :focused="current === 'removeMask'"
+        @focus="current = 'removeMask'"
       />
     </demo-block>
 
-    <demo-block :title="t('hintError')">
+    <demo-block ref="showInfo" :title="t('showInfo')">
       <van-password-input
-        :value="value4"
+        :info="t('info')"
+        :value="value.showInfo"
         :error-info="errorInfo"
-        :focused="keyboard === 'value4'"
-        @focus="keyboard = 'value4'"
+        :focused="current === 'showInfo'"
+        @focus="current = 'showInfo'"
       />
     </demo-block>
+
+    <van-number-keyboard
+      :show="!!current"
+      @blur="current = ''"
+      @input="onInput"
+      @delete="onDelete"
+    />
   </demo-section>
 </template>
 
@@ -51,46 +59,76 @@ export default {
   i18n: {
     'zh-CN': {
       info: '密码为 6 位数字',
-      customLength: '自定义长度',
-      removeMask: '明文展示',
-      hintError: '错误提示',
+      showInfo: '提示信息',
+      addGutter: '格子间距',
       errorInfo: '密码错误',
+      removeMask: '明文展示',
+      customLength: '自定义长度',
     },
     'en-US': {
       info: 'Some tips',
-      customLength: 'Custom Length',
-      removeMask: 'Remove Mask',
-      hintError: 'Hint Error',
+      showInfo: 'Show Info',
+      addGutter: 'Add Gutter',
       errorInfo: 'Password Mistake',
+      removeMask: 'Remove Mask',
+      customLength: 'Custom Length',
     },
   },
 
   data() {
     return {
-      value1: '123',
-      value2: '123',
-      value3: '123',
-      value4: '123',
-      keyboard: 'value1',
+      value: {
+        showInfo: '123',
+        addGutter: '123',
+        basicUsage: '123',
+        removeMask: '123',
+        customLength: '123',
+      },
+      current: 'basicUsage',
       errorInfo: '',
     };
   },
 
-  methods: {
-    onInput(key) {
-      const { keyboard } = this;
-      this[keyboard] = (this[keyboard] + key).slice(0, 6);
-      if (this[keyboard].length === 6) {
-        this.errorInfo = this.t('errorInfo');
-      } else {
-        this.errorInfo = '';
+  watch: {
+    current(value) {
+      if (value) {
+        const el = this.$refs[value].$el;
+        const { top } = el.getBoundingClientRect();
+        window.scrollTo(0, window.pageYOffset + top);
       }
     },
+  },
 
+  methods: {
+    onInput(key) {
+      const { value, current } = this;
+      const maxlegnth = current === 'customLength' ? 4 : 6;
+      const newValue = (value[current] + key).slice(0, maxlegnth);
+
+      value[current] = newValue;
+
+      if (
+        current === 'showInfo' &&
+        newValue.length === 6 &&
+        newValue !== '123456'
+      ) {
+        this.errorInfo = this.t('errorInfo');
+      }
+    },
     onDelete() {
-      const { keyboard } = this;
-      this[keyboard] = this[keyboard].slice(0, this[keyboard].length - 1);
+      const { value, current } = this;
+      value[current] = value[current].slice(0, value[current].length - 1);
+
+      if (current === 'showInfo') {
+        this.errorInfo = '';
+      }
     },
   },
 };
 </script>
+
+<style lang="less">
+.demo-password-input {
+  min-height: 140vh;
+}
+</style>

src/password-input/test/__snapshots__/demo.spec.js.snap

@@ -14,62 +14,27 @@ exports[`renders demo correctly 1`] = `
         <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
         <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
       </ul>
-      <div class="van-password-input__info">密码为 6 位数字</div>
     </div>
-    <div class="van-number-keyboard" name="van-slide-up">
-      <div class="van-number-keyboard__body">
-        <div class="van-number-keyboard__keys">
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key">1</div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key">2</div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key">3</div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key">4</div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key">5</div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key">6</div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key">7</div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key">8</div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key">9</div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
-                <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-              </svg></div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key">0</div>
-          </div>
-          <div class="van-key__wrapper">
-            <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
-                <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-              </svg></div>
-          </div>
-        </div>
-      </div>
+  </div>
+  <div>
+    <div class="van-password-input">
+      <ul class="van-password-input__security van-hairline--surround">
+        <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
+      </ul>
     </div>
   </div>
   <div>
     <div class="van-password-input">
       <ul class="van-password-input__security">
         <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
-        <li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
-        <li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: hidden;"></i></li>
+        <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i></li>
+        <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i></li>
+        <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
+        <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
+        <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
       </ul>
     </div>
   </div>
@@ -95,6 +60,53 @@ exports[`renders demo correctly 1`] = `
         <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
         <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
       </ul>
+      <div class="van-password-input__info">密码为 6 位数字</div>
+    </div>
+  </div>
+  <div class="van-number-keyboard" name="van-slide-up">
+    <div class="van-number-keyboard__body">
+      <div class="van-number-keyboard__keys">
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">1</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">2</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">3</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">4</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">5</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">6</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">7</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">8</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">9</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+              <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
+            </svg></div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">0</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+              <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
+            </svg></div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

src/picker/README.md

@@ -285,7 +285,7 @@ Picker events will pass different parameters according to the columns are single
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/picker/README.zh-CN.md

@@ -310,7 +310,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/picker/index.less

@@ -54,7 +54,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 2;
+    z-index: 3;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -67,7 +67,7 @@
     top: 50%;
     right: @padding-md;
     left: @padding-md;
-    z-index: 3;
+    z-index: 2;
     transform: translateY(-50%);
     pointer-events: none;
   }
@@ -76,7 +76,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 2;
+    z-index: 1;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(

src/swipe-cell/README.md

@@ -132,7 +132,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get SwipeCell instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get SwipeCell instance and call instance methods.
 
 | Name  | Description     | Attribute                | Return value |
 | ----- | --------------- | ------------------------ | ------------ |

src/swipe-cell/README.zh-CN.md

@@ -1,5 +1,9 @@
 # SwipeCell 滑动单元格
 
+### 介绍
+
+可以左右滑动来展示操作按钮的单元格组件。
+
 ### 引入
 
 ```js
@@ -140,7 +144,7 @@ beforeClose 的第一个参数为对象，对象中包含以下属性：
 
 ### 方法
 
-通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明             | 参数                     | 返回值 |
 | ------ | ---------------- | ------------------------ | ------ |

src/swipe/README.md

@@ -189,7 +189,7 @@ export default {
 
 ### Swipe Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods.
+Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods..
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/swipe/README.zh-CN.md

@@ -195,7 +195,7 @@ export default {
 
 ### Swipe 方法
 
-通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
+通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/tab/README.md

@@ -266,7 +266,7 @@ export default {
 
 ### Tabs Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Tabs instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Tabs instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/tab/README.zh-CN.md

@@ -273,7 +273,7 @@ export default {
 
 ### Tabs 方法
 
-通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/uploader/README.md

@@ -254,7 +254,7 @@ Use `disabled` prop to disable uploader.
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Uploader instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Uploader instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/uploader/README.zh-CN.md

@@ -282,7 +282,7 @@ before-read、after-read、before-delete 执行时会传递以下回调参数：
 
 ### 方法
 
-通过 ref 可以获取到 Uploader 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Uploader 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |