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: {