type=moneyinput 千分位格式化

examples/docs/zh-CN/input.md

@@ -14,13 +14,13 @@ Input 为受控组件，它**总会显示 Vue 绑定值**。
 
 :::demo
 ```html
-<el-input v-model="input" placeholder="请输入内容"></el-input>
+<el-input v-model="input" type="moneyinput" placeholder="请输入内容"></el-input>
 
 <script>
 export default {
   data() {
     return {
-      input: ''
+      input: '123123123'
     }
   }
 }

examples/versions.json

-{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.7":"2.15"}
\ No newline at end of file
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.7675":"2.15"}
\ No newline at end of file

package.json

 {
   "name": "element-ui",
-  "version": "2.15.7667",
+  "version": "2.15.7675",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

packages/input/src/input.vue

-<template>
+<template> 
   <div :class="[
     type === 'textarea' ? 'el-textarea' : 'el-input',
     inputSize ? 'el-input--' + inputSize : '',
@@ -21,24 +21,44 @@
         <slot name="prepend"></slot>
       </div>
       <input
-        :tabindex="tabindex"
-        v-if="type !== 'textarea'"
-        class="el-input__inner"
-        v-bind="$attrs"
-        :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
-        :disabled="inputDisabled"
-        :readonly="readonly"
-        :autocomplete="autoComplete || autocomplete"
-        ref="input"
-        @compositionstart="handleCompositionStart"
-        @compositionupdate="handleCompositionUpdate"
-        @compositionend="handleCompositionEnd"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @change="handleChange"
-        :aria-label="label"
-      >
+          :tabindex="tabindex"
+          v-if="type === 'moneyinput'"
+          class="el-input__inner"
+          v-bind="$attrs"
+          :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
+          :disabled="inputDisabled"
+          :readonly="readonly"
+          :autocomplete="autoComplete || autocomplete"
+          ref="input"
+          @compositionstart="handleCompositionStart"
+          @compositionupdate="handleCompositionUpdate"
+          @compositionend="handleCompositionEnd"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :aria-label="label" 
+          v-money
+        >
+      <input
+          :tabindex="tabindex"
+          v-else-if="type !== 'textarea'"
+          class="el-input__inner"
+          v-bind="$attrs"
+          :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
+          :disabled="inputDisabled"
+          :readonly="readonly"
+          :autocomplete="autoComplete || autocomplete"
+          ref="input"
+          @compositionstart="handleCompositionStart"
+          @compositionupdate="handleCompositionUpdate"
+          @compositionend="handleCompositionEnd"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :aria-label="label" 
+        >
       <!-- 前置内容 -->
       <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
         <slot name="prefix"></slot>
@@ -143,7 +163,6 @@
         focusOpen: false
       };
     },
-
     props: {
       value: [String, Number],
       size: String,
@@ -260,7 +279,30 @@
           (this.textLength > this.upperLimit);
       }
     },
-
+    directives: {
+      money: {
+        // 指令的定义
+        inserted: function(el, binding) {
+          // 指令作用在 element-input 节点，对应原生 div.el-input (真实input节点的父节点)
+          if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
+            el = el.getElementsByTagName('input')[0];
+          }
+          // 带¥符号、保留2位小数+千分位
+          // el.value = (Number(el.value)).toLocaleString('zh', {style:'currency', currency: 'CNY', minimumFractionDigits: 2});
+          // 保留2位小数+千分位
+          el.value = parseFloat(el.value).toLocaleString(undefined, { 'minimumFractionDigits': 2, 'maximumFractionDigits': 8 });
+          // console.log(el);
+          el.onblur = (e) => {
+            // 去除‘，’
+            let a = el.value.replace(/,/g, '');
+            if (a) {
+              el.value = parseFloat(a).toLocaleString(undefined, { 'minimumFractionDigits': 2, 'maximumFractionDigits': 8 });
+              // console.log(el.value);
+            }
+          };
+        }
+      }
+    },
     watch: {
       value(val) {
         this.$nextTick(this.resizeTextarea);
@@ -329,11 +371,20 @@
 
         this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
       },
+      formatMoney(val) {
+        if (this.type === 'moneyinput') {
+          try {
+            val = parseFloat(val || '0').toLocaleString(undefined, { 'minimumFractionDigits': 2, 'maximumFractionDigits': 8 });
+          } catch (ex) {
+          }
+        }
+        return val;
+      },
       setNativeInputValue() {
         const input = this.getInput();
         if (!input) return;
         if (input.value === this.nativeInputValue) return;
-        input.value = this.nativeInputValue;
+        input.value = this.formatMoney(this.nativeInputValue);
       },
       handleFocus(event) {
         this.focused = true;

src/index.js

@@ -210,7 +210,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.7667',
+  version: '2.15.7675',
   locale: locale.use,
   i18n: locale.i18n,
   install,