diff --git a/src/field/README.md b/src/field/README.md index 3068c69b3..d9d404dfc 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -126,17 +126,43 @@ Use `error` or `error-message` to show error info Use button slot to insert button ```html - - - Send SMS - - + + Send SMS + +``` + +### Format Value + +Use `formatter` prop to format the input value + +```html + +``` + +```js +export default { + data() { + return { + value: '' + }; + }, + methods: { + formatter(value) { + return value.replace(/\d/g, ''); + } + } +} ``` ### Auto Resize @@ -144,33 +170,29 @@ Use button slot to insert button Textarea Field can be auto resize when has `autosize` prop ```html - - - + ``` ### Show Word Limit ```html - - - + ``` ## API @@ -195,6 +217,7 @@ Textarea Field can be auto resize when has `autosize` prop | autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` | - | | show-word-limit | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | 2.2.8 | | error | Whether to show error info | *boolean* | `false` | - | +| formatter | Input value formatter | *Function* | - | 2.4.2 | | arrow-direction | Can be set to `left` `up` `down` | *string* | - | 2.0.4 | | error-message | Error message | *string* | `''` | - | | label-class | Label className | *any* | - | - | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index d5d084ec5..7daae8cda 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -142,17 +142,44 @@ export default { 通过 button 插槽可以在输入框尾部插入按钮 ```html - - - 发送验证码 - - + + 发送验证码 + +``` + +### 格式化输入内容 + +通过`formatter`属性可以对输入的内容进行格式化 + +```html + +``` + +```js +export default { + data() { + return { + value: '' + }; + }, + methods: { + formatter(value) { + // 过滤输入的数字 + return value.replace(/\d/g, ''); + } + } +} ``` ### 高度自适应 @@ -160,16 +187,14 @@ export default { 对于 textarea，可以通过`autosize`属性设置高度自适应 ```html - - - + ``` ### 显示字数统计 @@ -177,18 +202,16 @@ export default { 设置`maxlength`和`show-word-limit`属性后会在底部显示字数统计 ```html - - - + ``` ## API @@ -213,6 +236,7 @@ export default { | autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | - | | show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | 2.2.8 | | error | 是否将输入内容标红 | *boolean* | `false` | - | +| formatter | 输入内容格式化函数 | *Function* | - | 2.4.2 | | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | - | 2.0.4 | | error-message | 底部错误提示文案，为空时不展示 | *string* | `''` | - | label-class | 左侧文本额外类名 | *any* | - | - | @@ -220,7 +244,7 @@ export default { | label-align | 左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` | - | | input-align | 输入框内容对齐方式，可选值为 `center` `right` | *string* | `left` | - | | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` | - | -| autosize | 自适应内容高度，只对 textarea 有效，可传入对象,
如 { maxHeight: 100, minHeight: 50 }，单位为`px` | *boolean \| object* | `false` | - | +| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | *boolean \| object* | `false` | - | | left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/zh-CN/icon) | *string* | - | - | | right-icon | 右侧图标名称或图片链接，可选值见 [Icon 组件](#/zh-CN/icon) | *string* | - | - | diff --git a/src/field/demo/index.vue b/src/field/demo/index.vue index 1993c18ac..df9c43610 100644 --- a/src/field/demo/index.vue +++ b/src/field/demo/index.vue @@ -6,7 +6,7 @@ - + - + @@ -70,7 +70,7 @@ - + - + + + + + + + diff --git a/src/field/index.js b/src/field/index.js index 52eb8263a..4d75bf100 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -20,6 +20,7 @@ export default createComponent({ leftIcon: String, rightIcon: String, clearable: Boolean, + formatter: Function, maxlength: [Number, String], labelWidth: [Number, String], labelClass: null, @@ -99,7 +100,6 @@ export default createComponent({ } }, - // native maxlength not work when type = number format(target = this.$refs.input) { if (!target) { return; @@ -108,6 +108,7 @@ export default createComponent({ let { value } = target; const { maxlength } = this; + // native maxlength not work when type is number if (isDef(maxlength) && value.length > maxlength) { value = value.slice(0, maxlength); target.value = value; @@ -124,6 +125,16 @@ export default createComponent({ } } + if (this.formatter) { + const originValue = value; + + value = this.formatter(value); + + if (value !== originValue) { + target.value = value; + } + } + return value; }, diff --git a/src/field/test/__snapshots__/demo.spec.js.snap b/src/field/test/__snapshots__/demo.spec.js.snap index 72fcb3367..92f5d3c1b 100644 --- a/src/field/test/__snapshots__/demo.spec.js.snap +++ b/src/field/test/__snapshots__/demo.spec.js.snap @@ -115,6 +115,16 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
文本
+
+
+
+
+
+
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js index acd91cb4c..8dc19a6fa 100644 --- a/src/field/test/index.spec.js +++ b/src/field/test/index.spec.js @@ -262,3 +262,21 @@ test('arrow-direction prop', () => { }); expect(wrapper).toMatchSnapshot(); }); + +test('formatter prop', () => { + const wrapper = mount(Field, { + propsData: { + value: 'abc123', + formatter: (value) => value.replace(/\d/g, '') + } + }); + + const input = wrapper.find('input'); + + input.trigger('input'); + expect(wrapper.emitted('input')[0][0]).toEqual('abc'); + + input.element.value = '123efg'; + input.trigger('input'); + expect(wrapper.emitted('input')[1][0]).toEqual('efg'); +});