diff --git a/src/field/README.md b/src/field/README.md
index 76815940b..6f3fa2e84 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -139,10 +139,17 @@ Use `formatter` prop to format the input value
```html
+
```
@@ -150,7 +157,8 @@ Use `formatter` prop to format the input value
export default {
data() {
return {
- value: '',
+ value1: '',
+ value2: '',
};
},
methods: {
@@ -230,6 +238,7 @@ Use `input-align` prop to align the input value
| error | Whether to show error info | _boolean_ | `false` |
| error-message | Error message | _string_ | - |
| formatter `v2.4.2` | Input value formatter | _Function_ | - |
+| format-trigger `v2.8.7` | When to format value,can be set to `onBlur` | _string_ | `onChange` |
| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | _string_ | `right` |
| label-class | Label className | _any_ | - |
| label-width | Label width | _number \| string_ | `90px` |
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index 8868a6786..e783b24b7 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -17,7 +17,7 @@ Vue.use(Field);
### 基础用法
-可以通过`v-model`双向绑定输入框的值,通过`placeholder`设置占位提示文字
+可以通过 `v-model` 双向绑定输入框的值,通过 `placeholder` 设置占位提示文字。
```html
@@ -38,7 +38,7 @@ export default {
### 自定义类型
-根据`type`属性定义不同类型的输入框,默认值为`text`
+根据 `type` 属性定义不同类型的输入框,默认值为 `text`。
```html
@@ -71,7 +71,7 @@ export default {
### 禁用输入框
-通过`readonly`将输入框设置为只读状态,通过`disabled`将输入框设置为禁用状态
+通过 `readonly` 将输入框设置为只读状态,通过 `disabled` 将输入框设置为禁用状态。
```html
@@ -82,7 +82,7 @@ export default {
### 显示图标
-通过`left-icon`和`right-icon`配置输入框两侧的图标,通过设置`clearable`在输入过程中展示清除图标
+通过 `left-icon` 和 `right-icon` 配置输入框两侧的图标,通过设置 `clearable` 在输入过程中展示清除图标。
```html
@@ -116,7 +116,7 @@ export default {
### 错误提示
-设置`required`属性表示这是一个必填项,可以配合`error`或`error-message`属性显示对应的错误提示
+设置 `required` 属性表示这是一个必填项,可以配合 `error` 或 `error-message` 属性显示对应的错误提示。
```html
@@ -139,7 +139,7 @@ export default {
### 插入按钮
-通过 button 插槽可以在输入框尾部插入按钮
+通过 button 插槽可以在输入框尾部插入按钮。
```html
+
```
@@ -172,7 +179,8 @@ export default {
export default {
data() {
return {
- value: '',
+ value1: '',
+ value2: '',
};
},
methods: {
@@ -186,7 +194,7 @@ export default {
### 高度自适应
-对于 textarea,可以通过`autosize`属性设置高度自适应
+对于 textarea,可以通过 `autosize` 属性设置高度自适应。
```html
+
@@ -15,16 +22,21 @@ export default {
'zh-CN': {
text: '文本',
formatValue: '格式化输入内容',
+ formatOnBlur: '在失焦时执行格式化',
+ formatOnChange: '在输入时执行格式化',
},
'en-US': {
text: 'Text',
formatValue: 'Format Value',
+ formatOnBlur: 'Format On Blur',
+ formatOnChange: 'Format On Change',
},
},
data() {
return {
- formatValue: '',
+ value1: '',
+ value2: '',
};
},
diff --git a/src/field/index.js b/src/field/index.js
index cea638edf..e09db69b2 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -69,6 +69,10 @@ export default createComponent({
type: Boolean,
default: null,
},
+ formatTrigger: {
+ type: String,
+ default: 'onChange',
+ },
},
data() {
@@ -89,7 +93,7 @@ export default createComponent({
},
mounted() {
- this.updateValue(this.value);
+ this.updateValue(this.value, this.formatTrigger);
this.$nextTick(this.adjustSize);
if (this.vanForm) {
@@ -279,13 +283,9 @@ export default createComponent({
}
},
- updateValue(value) {
+ updateValue(value, trigger = 'onChange') {
value = isDef(value) ? String(value) : '';
- if (value === this.currentValue) {
- return;
- }
-
// native maxlength not work when type is number
const { maxlength } = this;
if (isDef(maxlength) && value.length > maxlength) {
@@ -297,7 +297,7 @@ export default createComponent({
value = formatNumber(value, allowDot);
}
- if (this.formatter) {
+ if (this.formatter && trigger === this.formatTrigger) {
value = this.formatter(value);
}
@@ -335,6 +335,7 @@ export default createComponent({
onBlur(event) {
this.focused = false;
+ this.updateValue(this.value, 'onBlur');
this.$emit('blur', event);
this.validateWithTrigger('onBlur');
resetScroll();
diff --git a/src/field/test/__snapshots__/demo.spec.js.snap b/src/field/test/__snapshots__/demo.spec.js.snap
index 508c4b48b..3bb3a66f1 100644
--- a/src/field/test/__snapshots__/demo.spec.js.snap
+++ b/src/field/test/__snapshots__/demo.spec.js.snap
@@ -112,7 +112,13 @@ exports[`renders demo correctly 1`] = `
+
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js
index 9867377e4..8f3a087c8 100644
--- a/src/field/test/index.spec.js
+++ b/src/field/test/index.spec.js
@@ -297,6 +297,29 @@ test('formatter prop', () => {
expect(wrapper.emitted('input')[1][0]).toEqual('efg');
});
+test('format-trigger prop', () => {
+ const wrapper = mount(Field, {
+ propsData: {
+ value: 'abc123',
+ formatTrigger: 'onBlur',
+ formatter: (value) => value.replace(/\d/g, ''),
+ },
+ });
+
+ wrapper.vm.$on('input', (value) => {
+ wrapper.setProps({ value });
+ });
+
+ expect(wrapper.emitted('input')[0][0]).toEqual('abc');
+
+ const input = wrapper.find('input');
+ input.element.value = '123efg';
+ input.trigger('input');
+ expect(wrapper.emitted('input')[1][0]).toEqual('123efg');
+ input.trigger('blur');
+ expect(wrapper.emitted('input')[2][0]).toEqual('efg');
+});
+
test('reach max word-limit', () => {
const wrapper = mount(Field, {
propsData: {