{renderTitle()}
diff --git a/src/collapse/README.md b/src/collapse/README.md
index 7ad8dbc21..25d5274d6 100644
--- a/src/collapse/README.md
+++ b/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_ | - |
diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md
index 44ac4adf0..df4bae5ac 100644
--- a/src/collapse/README.zh-CN.md
+++ b/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_ | - |
diff --git a/src/collapse/test/index.spec.js b/src/collapse/test/index.spec.js
index 6702cd9d9..bc935f91d 100644
--- a/src/collapse/test/index.spec.js
+++ b/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: `
+
+
+
+
+ `,
+ 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: `
+
+
+
+
+ `,
+ 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();
+ },
+ });
+});
diff --git a/src/count-down/README.md b/src/count-down/README.md
index badd24865..9ad60e550 100644
--- a/src/count-down/README.md
+++ b/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 |
| ----- | ---------------- | --------- | ------------ |
diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md
index b285903d9..6f14effb6 100644
--- a/src/count-down/README.zh-CN.md
+++ b/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)。
| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md
index 8afde999c..c4b4ef3d2 100644
--- a/src/datetime-picker/README.md
+++ b/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 |
| ------------------ | ------------------- | --------- | ------------ |
diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md
index e47906ce6..c2fd16df2 100644
--- a/src/datetime-picker/README.zh-CN.md
+++ b/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)。
| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index bde4d273c..a11fd8d53 100644
--- a/src/dropdown-menu/README.md
+++ b/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
diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md
index 59ebfe36a..0b75bded3 100644
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/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 数据结构
diff --git a/src/field/README.md b/src/field/README.md
index 1bb85a857..4bbfd7689 100644
--- a/src/field/README.md
+++ b/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 |
| ----- | ------------------- | --------- | ------------ |
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index af0a7b2d5..c37e401b3 100644
--- a/src/field/README.zh-CN.md
+++ b/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)。
| 方法名 | 说明 | 参数 | 返回值 |
| ------ | -------------- | ---- | ------ |
diff --git a/src/field/index.js b/src/field/index.js
index 23b06bcf9..965f84707 100644
--- a/src/field/index.js
+++ b/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') {
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js
index 08d23757f..e0a145001 100644
--- a/src/field/test/index.spec.js
+++ b/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', () => {
diff --git a/src/form/README.md b/src/form/README.md
index cb61f8db9..0fd8e7321 100644
--- a/src/form/README.md
+++ b/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 |
| --- | --- | --- | --- |
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index d4106d2b1..5fe5485ab 100644
--- a/src/form/README.zh-CN.md
+++ b/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)。
| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
diff --git a/src/grid-item/index.less b/src/grid-item/index.less
index 322982c53..63d2f951c 100644
--- a/src/grid-item/index.less
+++ b/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 {
diff --git a/src/list/README.md b/src/list/README.md
index aca84f948..88c87a4ab 100644
--- a/src/list/README.md
+++ b/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 |
| ----- | --------------------- | --------- | ------------ |
diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md
index 3955d1306..a78e3f7fa 100644
--- a/src/list/README.zh-CN.md
+++ b/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)。
| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
diff --git a/src/locale/README.md b/src/locale/README.md
index b2844ed7b..34d053770 100644
--- a/src/locale/README.md
+++ b/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.
diff --git a/src/locale/README.zh-CN.md b/src/locale/README.zh-CN.md
index 7b4b64e44..a34a39ae6 100644
--- a/src/locale/README.zh-CN.md
+++ b/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 组件的国际化需求，请自行配置国际化文案。
diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md
index 782f5e17f..865985e25 100644
--- a/src/number-keyboard/README.zh-CN.md
+++ b/src/number-keyboard/README.zh-CN.md
@@ -2,7 +2,7 @@
### 介绍
-数字虚拟键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用。
+虚拟数字键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用。
### 引入
diff --git a/src/pagination/README.md b/src/pagination/README.md
index 1b20ed4a4..e94e1f3d0 100644
--- a/src/pagination/README.md
+++ b/src/pagination/README.md
@@ -45,7 +45,7 @@ export default {
/>
```
-### Custom Render
+### Custom Button
```html
@@ -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 | `-` |
diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md
index ebca0a1c3..775172919 100644
--- a/src/pagination/README.zh-CN.md
+++ b/src/pagination/README.zh-CN.md
@@ -14,6 +14,8 @@ app.use(Pagination);
### 基础用法
+通过 `v-model` 来绑定当前页码。
+
```html
```
@@ -30,12 +32,16 @@ export default {
### 简单模式
+ 将 `mode` 设置为 `simple` 来切换到简单模式，此时分页器不会展示具体的页码按钮。
+
```html
```
### 显示省略号
+设置 `force-ellipses` 后会展示省略号按钮，点击后可以快速跳转。
+
```html
```
-### 自定义渲染
+### 自定义按钮
+
+通过 `prev-text`、`next-text` 等插槽来自定义分页按钮的内容。
```html
@@ -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` | 自定义下一页按钮文字 | `-` |
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
index 37a977ed1..dce90025f 100644
--- a/src/pagination/demo/index.vue
+++ b/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',
},
diff --git a/src/password-input/README.md b/src/password-input/README.md
index ab7cec4d7..7b99e8519 100644
--- a/src/password-input/README.md
+++ b/src/password-input/README.md
@@ -20,18 +20,14 @@ app.use(NumberKeyboard);
### Basic Usage
```html
-
-
```
@@ -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
```
-### Without mask
+### Add Gutter
+
+```html
+
+```
+
+### Without Mask
```html
-
-
```
@@ -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);
- },
},
};
```
diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md
index 8aa2aa537..2d3ceb8ef 100644
--- a/src/password-input/README.zh-CN.md
+++ b/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
```
@@ -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
+```
+
+### 格子间距
+
+通过 `gutter` 属性来设置格子之间的间距。
+
+```html
+
@@ -69,6 +75,8 @@ export default {
### 明文展示
+将 `mask` 设置为 `false` 可以明文展示输入的内容，适用于短信验证码等场景。
+
```html
```
-### 错误提示
+### 提示信息
-通过 `error-info` 属性可以设置错误提示信息，例如当输入六位时提示密码错误。
+通过 `info` 属性设置提示信息，通过 `error-info` 属性设置错误提示，例如当输入六位时提示密码错误。
```html
-
-
```
@@ -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);
- },
},
};
```
diff --git a/src/password-input/demo/index.vue b/src/password-input/demo/index.vue
index d321ade5e..28122ac87 100644
--- a/src/password-input/demo/index.vue
+++ b/src/password-input/demo/index.vue
@@ -1,48 +1,56 @@
-
+
-
-
-
+
-
+
+
+
+
+
-
+
+
+
@@ -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 = '';
+ }
},
},
};
+
+
diff --git a/src/password-input/test/__snapshots__/demo.spec.js.snap b/src/password-input/test/__snapshots__/demo.spec.js.snap
index ca92591da..6a78e4814 100644
--- a/src/password-input/test/__snapshots__/demo.spec.js.snap
+++ b/src/password-input/test/__snapshots__/demo.spec.js.snap
@@ -14,62 +14,27 @@ exports[`renders demo correctly 1`] = `
- 密码为 6 位数字