From 907e548cb048733dfebd7030672aa4d8600577aa Mon Sep 17 00:00:00 2001
From: yang <2636098325@qq.com>
Date: Wed, 22 Feb 2023 19:57:54 +0800
Subject: [PATCH] [input ]: Add formatting api

---
 examples/docs/zh-CN/input.md  |  28 +-
 packages/input/src/input.vue  | 704 ++++++++++++++++++----------------
 test/unit/specs/input.spec.js |  26 ++
 types/input.d.ts              |  12 +-
 4 files changed, 432 insertions(+), 338 deletions(-)

diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md
index eb74717db..30561a5e3 100644
--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
@@ -673,7 +673,29 @@ export default {
 </script>
 ```
 :::
+### 格式化
+:::demo  `formatter` 和 `parser` 可配合实现格式化能力（仅`type`为text生效）。
+```html
+<template>
+  <el-input
+    v-model="input"
+    placeholder="Please input"
+    :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+    :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
+  />
+</template>
 
+<script>
+export default {
+  data() {
+    return {
+      input: '',
+    }
+  }
+}
+</script>
+```
+:::
 ### Input Attributes
 
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
@@ -703,8 +725,10 @@ export default {
 | autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
 | form | 原生属性 | string | — | — |
 | label | 输入框关联的label文字 | string | — | — |
-| tabindex | 输入框的tabindex | string | - | - |
-| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
+| tabindex | 输入框的tabindex | string | — | — |
+| validate-event | 输入时是否触发表单的校验 | boolean | — | true |
+| formatter | 指定输入值的格式。(仅当 type 是"text"时才能工作) | Function | — | — |
+| parser |  指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用) | Function | — | — |
 
 ### Input Slots
 | name | 说明 |
diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
index 26321f1cf..84b723e50 100644
--- a/packages/input/src/input.vue
+++ b/packages/input/src/input.vue
@@ -1,16 +1,18 @@
 <template>
-  <div :class="[
-    type === 'textarea' ? 'el-textarea' : 'el-input',
-    inputSize ? 'el-input--' + inputSize : '',
-    {
-      'is-disabled': inputDisabled,
-      'is-exceed': inputExceed,
-      'el-input-group': $slots.prepend || $slots.append,
-      'el-input-group--append': $slots.append,
-      'el-input-group--prepend': $slots.prepend,
-      'el-input--prefix': $slots.prefix || prefixIcon,
-      'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
-    }
+  <div
+    :class="[
+      type === 'textarea' ? 'el-textarea' : 'el-input',
+      inputSize ? 'el-input--' + inputSize : '',
+      {
+        'is-disabled': inputDisabled,
+        'is-exceed': inputExceed,
+        'el-input-group': $slots.prepend || $slots.append,
+        'el-input-group--append': $slots.append,
+        'el-input-group--prepend': $slots.prepend,
+        'el-input--prefix': $slots.prefix || prefixIcon,
+        'el-input--suffix':
+          $slots.suffix || suffixIcon || clearable || showPassword,
+      },
     ]"
     @mouseenter="hovering = true"
     @mouseleave="hovering = false"
@@ -25,7 +27,7 @@
         v-if="type !== 'textarea'"
         class="el-input__inner"
         v-bind="$attrs"
-        :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
+        :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
         :disabled="inputDisabled"
         :readonly="readonly"
         :autocomplete="autoComplete || autocomplete"
@@ -38,33 +40,28 @@
         @blur="handleBlur"
         @change="handleChange"
         :aria-label="label"
-      >
+      />
       <!-- 前置内容 -->
       <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
         <slot name="prefix"></slot>
-        <i class="el-input__icon"
-           v-if="prefixIcon"
-           :class="prefixIcon">
-        </i>
+        <i class="el-input__icon" v-if="prefixIcon" :class="prefixIcon"> </i>
       </span>
       <!-- 后置内容 -->
-      <span
-        class="el-input__suffix"
-        v-if="getSuffixVisible()">
+      <span class="el-input__suffix" v-if="getSuffixVisible()">
         <span class="el-input__suffix-inner">
           <template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
             <slot name="suffix"></slot>
-            <i class="el-input__icon"
-              v-if="suffixIcon"
-              :class="suffixIcon">
+            <i class="el-input__icon" v-if="suffixIcon" :class="suffixIcon">
             </i>
           </template>
-          <i v-if="showClear"
+          <i
+            v-if="showClear"
             class="el-input__icon el-icon-circle-close el-input__clear"
             @mousedown.prevent
             @click="clear"
           ></i>
-          <i v-if="showPwdVisible"
+          <i
+            v-if="showPwdVisible"
             class="el-input__icon el-icon-view el-input__clear"
             @click="handlePasswordVisible"
           ></i>
@@ -74,9 +71,11 @@
             </span>
           </span>
         </span>
-        <i class="el-input__icon"
+        <i
+          class="el-input__icon"
           v-if="validateState"
-          :class="['el-input__validateIcon', validateIcon]">
+          :class="['el-input__validateIcon', validateIcon]"
+        >
         </i>
       </span>
       <!-- 后置元素 -->
@@ -104,337 +103,372 @@
       :aria-label="label"
     >
     </textarea>
-    <span v-if="isWordLimitVisible && type === 'textarea'" class="el-input__count">{{ textLength }}/{{ upperLimit }}</span>
+    <span
+      v-if="isWordLimitVisible && type === 'textarea'"
+      class="el-input__count"
+      >{{ textLength }}/{{ upperLimit }}</span
+    >
   </div>
 </template>
 <script>
-  import emitter from 'element-ui/src/mixins/emitter';
-  import Migrating from 'element-ui/src/mixins/migrating';
-  import calcTextareaHeight from './calcTextareaHeight';
-  import merge from 'element-ui/src/utils/merge';
-  import {isKorean} from 'element-ui/src/utils/shared';
+import emitter from 'element-ui/src/mixins/emitter';
+import Migrating from 'element-ui/src/mixins/migrating';
+import merge from 'element-ui/src/utils/merge';
+import { isKorean } from 'element-ui/src/utils/shared';
+import calcTextareaHeight from './calcTextareaHeight';
 
-  export default {
-    name: 'ElInput',
+export default {
+  name: 'ElInput',
 
-    componentName: 'ElInput',
+  componentName: 'ElInput',
 
-    mixins: [emitter, Migrating],
+  mixins: [emitter, Migrating],
 
-    inheritAttrs: false,
+  inheritAttrs: false,
 
-    inject: {
-      elForm: {
-        default: ''
-      },
-      elFormItem: {
-        default: ''
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      textareaCalcStyle: {},
+      hovering: false,
+      focused: false,
+      isComposing: false,
+      passwordVisible: false
+    };
+  },
+
+  props: {
+    value: [String, Number],
+    size: String,
+    resize: String,
+    form: String,
+    disabled: Boolean,
+    readonly: Boolean,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    autosize: {
+      type: [Boolean, Object],
+      default: false
+    },
+    autocomplete: {
+      type: String,
+      default: 'off'
+    },
+    /** @Deprecated in next major version */
+    autoComplete: {
+      type: String,
+      validator(val) {
+        process.env.NODE_ENV !== 'production' &&
+          console.warn(
+            "[Element Warn][Input]'auto-complete' property will be deprecated in next major version. please use 'autocomplete' instead."
+          );
+        return true;
       }
     },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    },
+    suffixIcon: String,
+    prefixIcon: String,
+    label: String,
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    showPassword: {
+      type: Boolean,
+      default: false
+    },
+    showWordLimit: {
+      type: Boolean,
+      default: false
+    },
+    tabindex: String,
+    formatter: {
+      type: Function,
+      default: null
+    },
+    parser: {
+      type: Function,
+      default: null
+    }
+  },
 
-    data() {
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    validateState() {
+      return this.elFormItem ? this.elFormItem.validateState : '';
+    },
+    needStatusIcon() {
+      return this.elForm ? this.elForm.statusIcon : false;
+    },
+    validateIcon() {
       return {
-        textareaCalcStyle: {},
-        hovering: false,
-        focused: false,
-        isComposing: false,
-        passwordVisible: false
+        validating: 'el-icon-loading',
+        success: 'el-icon-circle-check',
+        error: 'el-icon-circle-close'
+      }[this.validateState];
+    },
+    textareaStyle() {
+      return merge({}, this.textareaCalcStyle, { resize: this.resize });
+    },
+    inputSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+    inputDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    },
+    nativeInputValue() {
+      return this.value === null || this.value === undefined
+        ? ''
+        : String(this.value);
+    },
+    showClear() {
+      return (
+        this.clearable &&
+        !this.inputDisabled &&
+        !this.readonly &&
+        this.nativeInputValue &&
+        (this.focused || this.hovering)
+      );
+    },
+    showPwdVisible() {
+      return (
+        this.showPassword &&
+        !this.inputDisabled &&
+        !this.readonly &&
+        (!!this.nativeInputValue || this.focused)
+      );
+    },
+    isWordLimitVisible() {
+      return (
+        this.showWordLimit &&
+        this.$attrs.maxlength &&
+        (this.type === 'text' || this.type === 'textarea') &&
+        !this.inputDisabled &&
+        !this.readonly &&
+        !this.showPassword
+      );
+    },
+    upperLimit() {
+      return this.$attrs.maxlength;
+    },
+    textLength() {
+      if (typeof this.value === 'number') {
+        return String(this.value).length;
+      }
+
+      return (this.value || '').length;
+    },
+    inputExceed() {
+      // show exceed style if length of initial value greater then maxlength
+      return this.isWordLimitVisible && this.textLength > this.upperLimit;
+    }
+  },
+
+  watch: {
+    value(val) {
+      this.$nextTick(this.resizeTextarea);
+      if (this.validateEvent) {
+        this.dispatch('ElFormItem', 'el.form.change', [val]);
+      }
+    },
+    // native input value is set explicitly
+    // do not use v-model / :value in template
+    // see: https://github.com/ElemeFE/element/issues/14521
+    nativeInputValue() {
+      this.setNativeInputValue();
+    },
+    // when change between <input> and <textarea>,
+    // update DOM dependent value and styles
+    // https://github.com/ElemeFE/element/issues/14857
+    type() {
+      this.$nextTick(() => {
+        this.setNativeInputValue();
+        this.resizeTextarea();
+        this.updateIconOffset();
+      });
+    }
+  },
+
+  methods: {
+    focus() {
+      this.getInput().focus();
+    },
+    blur() {
+      this.getInput().blur();
+    },
+    getMigratingConfig() {
+      return {
+        props: {
+          icon: 'icon is removed, use suffix-icon / prefix-icon instead.',
+          'on-icon-click': 'on-icon-click is removed.'
+        },
+        events: {
+          click: 'click is removed.'
+        }
       };
     },
-
-    props: {
-      value: [String, Number],
-      size: String,
-      resize: String,
-      form: String,
-      disabled: Boolean,
-      readonly: Boolean,
-      type: {
-        type: String,
-        default: 'text'
-      },
-      autosize: {
-        type: [Boolean, Object],
-        default: false
-      },
-      autocomplete: {
-        type: String,
-        default: 'off'
-      },
-      /** @Deprecated in next major version */
-      autoComplete: {
-        type: String,
-        validator(val) {
-          process.env.NODE_ENV !== 'production' &&
-            console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
-          return true;
-        }
-      },
-      validateEvent: {
-        type: Boolean,
-        default: true
-      },
-      suffixIcon: String,
-      prefixIcon: String,
-      label: String,
-      clearable: {
-        type: Boolean,
-        default: false
-      },
-      showPassword: {
-        type: Boolean,
-        default: false
-      },
-      showWordLimit: {
-        type: Boolean,
-        default: false
-      },
-      tabindex: String
-    },
-
-    computed: {
-      _elFormItemSize() {
-        return (this.elFormItem || {}).elFormItemSize;
-      },
-      validateState() {
-        return this.elFormItem ? this.elFormItem.validateState : '';
-      },
-      needStatusIcon() {
-        return this.elForm ? this.elForm.statusIcon : false;
-      },
-      validateIcon() {
-        return {
-          validating: 'el-icon-loading',
-          success: 'el-icon-circle-check',
-          error: 'el-icon-circle-close'
-        }[this.validateState];
-      },
-      textareaStyle() {
-        return merge({}, this.textareaCalcStyle, { resize: this.resize });
-      },
-      inputSize() {
-        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
-      },
-      inputDisabled() {
-        return this.disabled || (this.elForm || {}).disabled;
-      },
-      nativeInputValue() {
-        return this.value === null || this.value === undefined ? '' : String(this.value);
-      },
-      showClear() {
-        return this.clearable &&
-          !this.inputDisabled &&
-          !this.readonly &&
-          this.nativeInputValue &&
-          (this.focused || this.hovering);
-      },
-      showPwdVisible() {
-        return this.showPassword &&
-          !this.inputDisabled &&
-          !this.readonly &&
-          (!!this.nativeInputValue || this.focused);
-      },
-      isWordLimitVisible() {
-        return this.showWordLimit &&
-          this.$attrs.maxlength &&
-          (this.type === 'text' || this.type === 'textarea') &&
-          !this.inputDisabled &&
-          !this.readonly &&
-          !this.showPassword;
-      },
-      upperLimit() {
-        return this.$attrs.maxlength;
-      },
-      textLength() {
-        if (typeof this.value === 'number') {
-          return String(this.value).length;
-        }
-
-        return (this.value || '').length;
-      },
-      inputExceed() {
-        // show exceed style if length of initial value greater then maxlength
-        return this.isWordLimitVisible &&
-          (this.textLength > this.upperLimit);
+    handleBlur(event) {
+      this.focused = false;
+      this.$emit('blur', event);
+      if (this.validateEvent) {
+        this.dispatch('ElFormItem', 'el.form.blur', [this.value]);
       }
     },
-
-    watch: {
-      value(val) {
-        this.$nextTick(this.resizeTextarea);
-        if (this.validateEvent) {
-          this.dispatch('ElFormItem', 'el.form.change', [val]);
-        }
-      },
-      // native input value is set explicitly
-      // do not use v-model / :value in template
-      // see: https://github.com/ElemeFE/element/issues/14521
-      nativeInputValue() {
-        this.setNativeInputValue();
-      },
-      // when change between <input> and <textarea>,
-      // update DOM dependent value and styles
-      // https://github.com/ElemeFE/element/issues/14857
-      type() {
-        this.$nextTick(() => {
-          this.setNativeInputValue();
-          this.resizeTextarea();
-          this.updateIconOffset();
-        });
-      }
+    select() {
+      this.getInput().select();
     },
-
-    methods: {
-      focus() {
-        this.getInput().focus();
-      },
-      blur() {
-        this.getInput().blur();
-      },
-      getMigratingConfig() {
-        return {
-          props: {
-            'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',
-            'on-icon-click': 'on-icon-click is removed.'
-          },
-          events: {
-            'click': 'click is removed.'
-          }
+    resizeTextarea() {
+      if (this.$isServer) return;
+      const { autosize, type } = this;
+      if (type !== 'textarea') return;
+      if (!autosize) {
+        this.textareaCalcStyle = {
+          minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
         };
-      },
-      handleBlur(event) {
-        this.focused = false;
-        this.$emit('blur', event);
-        if (this.validateEvent) {
-          this.dispatch('ElFormItem', 'el.form.blur', [this.value]);
-        }
-      },
-      select() {
-        this.getInput().select();
-      },
-      resizeTextarea() {
-        if (this.$isServer) return;
-        const { autosize, type } = this;
-        if (type !== 'textarea') return;
-        if (!autosize) {
-          this.textareaCalcStyle = {
-            minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
-          };
-          return;
-        }
-        const minRows = autosize.minRows;
-        const maxRows = autosize.maxRows;
+        return;
+      }
+      const minRows = autosize.minRows;
+      const maxRows = autosize.maxRows;
 
-        this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
-      },
-      setNativeInputValue() {
-        const input = this.getInput();
-        if (!input) return;
-        if (input.value === this.nativeInputValue) return;
-        input.value = this.nativeInputValue;
-      },
-      handleFocus(event) {
-        this.focused = true;
-        this.$emit('focus', event);
-      },
-      handleCompositionStart(event) {
-        this.$emit('compositionstart', event);
-        this.isComposing = true;
-      },
-      handleCompositionUpdate(event) {
-        this.$emit('compositionupdate', event);
-        const text = event.target.value;
-        const lastCharacter = text[text.length - 1] || '';
-        this.isComposing = !isKorean(lastCharacter);
-      },
-      handleCompositionEnd(event) {
-        this.$emit('compositionend', event);
-        if (this.isComposing) {
-          this.isComposing = false;
-          this.handleInput(event);
-        }
-      },
-      handleInput(event) {
-        // should not emit input during composition
-        // see: https://github.com/ElemeFE/element/issues/10516
-        if (this.isComposing) return;
-
-        // hack for https://github.com/ElemeFE/element/issues/8548
-        // should remove the following line when we don't support IE
-        if (event.target.value === this.nativeInputValue) return;
-
-        this.$emit('input', event.target.value);
-
-        // ensure native input value is controlled
-        // see: https://github.com/ElemeFE/element/issues/12850
-        this.$nextTick(this.setNativeInputValue);
-      },
-      handleChange(event) {
-        this.$emit('change', event.target.value);
-      },
-      calcIconOffset(place) {
-        let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${place}`) || []);
-        if (!elList.length) return;
-        let el = null;
-        for (let i = 0; i < elList.length; i++) {
-          if (elList[i].parentNode === this.$el) {
-            el = elList[i];
-            break;
-          }
-        }
-        if (!el) return;
-        const pendantMap = {
-          suffix: 'append',
-          prefix: 'prepend'
-        };
-
-        const pendant = pendantMap[place];
-        if (this.$slots[pendant]) {
-          el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
-        } else {
-          el.removeAttribute('style');
-        }
-      },
-      updateIconOffset() {
-        this.calcIconOffset('prefix');
-        this.calcIconOffset('suffix');
-      },
-      clear() {
-        this.$emit('input', '');
-        this.$emit('change', '');
-        this.$emit('clear');
-      },
-      handlePasswordVisible() {
-        this.passwordVisible = !this.passwordVisible;
-        this.$nextTick(() => {
-          this.focus();
-        });
-      },
-      getInput() {
-        return this.$refs.input || this.$refs.textarea;
-      },
-      getSuffixVisible() {
-        return this.$slots.suffix ||
-          this.suffixIcon ||
-          this.showClear ||
-          this.showPassword ||
-          this.isWordLimitVisible ||
-          (this.validateState && this.needStatusIcon);
+      this.textareaCalcStyle = calcTextareaHeight(
+        this.$refs.textarea,
+        minRows,
+        maxRows
+      );
+    },
+    setNativeInputValue() {
+      const input = this.getInput();
+      if (!input) return;
+      if (input.value === this.nativeInputValue) return;
+      input.value = this.nativeInputValue;
+    },
+    handleFocus(event) {
+      this.focused = true;
+      this.$emit('focus', event);
+    },
+    handleCompositionStart(event) {
+      this.$emit('compositionstart', event);
+      this.isComposing = true;
+    },
+    handleCompositionUpdate(event) {
+      this.$emit('compositionupdate', event);
+      const text = event.target.value;
+      const lastCharacter = text[text.length - 1] || '';
+      this.isComposing = !isKorean(lastCharacter);
+    },
+    handleCompositionEnd(event) {
+      this.$emit('compositionend', event);
+      if (this.isComposing) {
+        this.isComposing = false;
+        this.handleInput(event);
       }
     },
+    handleInput(event) {
+      let { value, type } = event.target;
+      let { formatter, parser } = this;
+      // should not emit input during composition
+      // see: https://github.com/ElemeFE/element/issues/10516
+      if (this.isComposing) return;
+      // hack for https://github.com/ElemeFE/element/issues/8548
+      // should remove the following line when we don't support IE
+      if (value === this.nativeInputValue) return;
+      if (formatter && type === 'text') {
+        value = parser ? parser(value) : value;
+        value = formatter(value);
+      }
+      this.$emit('input', value);
 
-    created() {
-      this.$on('inputSelect', this.select);
+      // ensure native input value is controlled
+      // see: https://github.com/ElemeFE/element/issues/12850
+      this.$nextTick(this.setNativeInputValue);
     },
-
-    mounted() {
-      this.setNativeInputValue();
-      this.resizeTextarea();
-      this.updateIconOffset();
+    handleChange(event) {
+      this.$emit('change', event.target.value);
     },
+    calcIconOffset(place) {
+      let elList = [].slice.call(
+        this.$el.querySelectorAll(`.el-input__${place}`) || []
+      );
+      if (!elList.length) return;
+      let el = null;
+      for (let i = 0; i < elList.length; i++) {
+        if (elList[i].parentNode === this.$el) {
+          el = elList[i];
+          break;
+        }
+      }
+      if (!el) return;
+      const pendantMap = {
+        suffix: 'append',
+        prefix: 'prepend'
+      };
 
-    updated() {
-      this.$nextTick(this.updateIconOffset);
+      const pendant = pendantMap[place];
+      if (this.$slots[pendant]) {
+        el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${
+          this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth
+        }px)`;
+      } else {
+        el.removeAttribute('style');
+      }
+    },
+    updateIconOffset() {
+      this.calcIconOffset('prefix');
+      this.calcIconOffset('suffix');
+    },
+    clear() {
+      this.$emit('input', '');
+      this.$emit('change', '');
+      this.$emit('clear');
+    },
+    handlePasswordVisible() {
+      this.passwordVisible = !this.passwordVisible;
+      this.$nextTick(() => {
+        this.focus();
+      });
+    },
+    getInput() {
+      return this.$refs.input || this.$refs.textarea;
+    },
+    getSuffixVisible() {
+      return (
+        this.$slots.suffix ||
+        this.suffixIcon ||
+        this.showClear ||
+        this.showPassword ||
+        this.isWordLimitVisible ||
+        (this.validateState && this.needStatusIcon)
+      );
     }
-  };
+  },
+
+  created() {
+    this.$on('inputSelect', this.select);
+  },
+
+  mounted() {
+    this.setNativeInputValue();
+    this.resizeTextarea();
+    this.updateIconOffset();
+  },
+
+  updated() {
+    this.$nextTick(this.updateIconOffset);
+  }
+};
 </script>
diff --git a/test/unit/specs/input.spec.js b/test/unit/specs/input.spec.js
index f12b87ba5..f952e1438 100644
--- a/test/unit/specs/input.spec.js
+++ b/test/unit/specs/input.spec.js
@@ -480,4 +480,30 @@ describe('Input', () => {
     await waitImmediate();
     expect(inputElm4.classList.contains('is-exceed')).to.false;
   });
+  it('formatter Processing test', async() => {
+    vm = createVue({
+      template: `
+      <el-input
+      v-model="input"
+      placeholder="请输入内容"
+      :formatter="(value) => value + 'input'"
+      :parser="(value) => value.replace(/input/g, '')"
+    ></el-input>
+      `,
+      data() {
+        return {
+          input: ''
+        };
+      }
+    }, true);
+    let inputElm = vm.$el.querySelector('input');
+    expect(inputElm.getAttribute('placeholder')).to.equal('请输入内容');
+    let evt = document.createEvent('HTMLEvents');
+    evt = new Event('input', {'bubbles': true, 'cancelable': true});
+    inputElm.value = 'text';
+    inputElm.dispatchEvent(evt);
+    await waitImmediate();
+    expect(inputElm.value).to.equal('textinput');
+  });
+
 });
diff --git a/types/input.d.ts b/types/input.d.ts
index a67ef88d0..a88e09450 100644
--- a/types/input.d.ts
+++ b/types/input.d.ts
@@ -12,7 +12,12 @@ export interface AutoSize {
   /** Maximum rows to show */
   maxRows: number
 }
-
+export interface FormatterHandler {
+  /**
+   * @param value Current value of the text input
+   */
+  (value: string | number): void
+}
 /** Input Component */
 export declare class ElInput extends ElementUIComponent {
   /** Type of input */
@@ -90,6 +95,11 @@ export declare class ElInput extends ElementUIComponent {
   /** Whether to show wordCount when setting maxLength */
   showWordLimit: boolean
 
+  /**Format value program */
+  formatter:FormatterHandler
+  
+  /**Extract value program */
+  parser:FormatterHandler
   /**
    * Focus the Input component
    */