添加自定义element金额输入框组件

src/components/AmountInput/index.vue

@@ -0,0 +1,106 @@
+<!-- 金额输入框 -->
+<template>
+  <el-input v-model.trim="form.moneyShow" :placeholder="placeholder" @blur="handleBlur" @focus="handleFocus" @input="handleInput" @paste.native.capture.prevent="handlePaste">
+    <i slot="prefix" class="el-input__icon el-icon-coin"></i>
+  </el-input>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        moneyShow: null,
+        money: null,
+      },
+    }
+  },
+  props: {
+    placeholder: String,
+    name: String,
+  },
+  methods: {
+    // 失去焦点
+    handleBlur() {
+      let form = Object.assign({}, this.form)
+      form.moneyShow = this.$thousands(this.form.money)
+      this.form = Object.assign({}, form)
+    },
+    // 获取焦点
+    handleFocus() {
+      let form = Object.assign({}, this.form)
+      form.moneyShow = form.money
+      this.form = Object.assign({}, form)
+    },
+    // 输入时
+    handleInput(value) {
+      let amount
+      // 最后一个字符
+      let last = value.charAt(value.length - 1)
+      // 去掉最后一个字符的后的
+      let cutLast = value.substring(0, value.length - 1)
+      let form = Object.assign({}, this.form)
+      let num = /^[0-9]*$/
+      if (last) {
+        if (num.test(last) || last == '.') {
+          if (last == '.') {
+            if (cutLast.includes('.')) {
+              amount = value.substring(0, value.length - 1)
+            } else {
+              amount = value
+            }
+          } else {
+            amount = value
+          }
+        } else {
+          amount = value.substring(0, value.length - 1)
+        }
+      }
+      form.moneyShow = amount
+      form.money = amount
+      this.form = Object.assign({}, form)
+      this.$emit('amount', this.name, amount)
+    },
+    // 粘贴时
+    handlePaste(res) {
+      let amount
+      let num = /^[0-9]*$/
+      let clip = res.clipboardData.getData('Text')
+      let form = Object.assign({}, this.form)
+      if (num.test(clip)) {
+        amount = form.money + clip
+      } else if (clip.includes('.')) {
+        if (clip.split('.').length > 2) {
+          amount = form.money
+        } else {
+          if (clip.split('.').length > 0) {
+            if (num.test(clip.split('.')[0]) && num.test(clip.split('.')[1])) {
+              if (form.money.includes('.')) {
+                amount = form.money
+              } else {
+                amount = form.money + clip
+              }
+            } else {
+              amount = form.money
+            }
+          } else {
+            amount = form.money
+          }
+        }
+      } else {
+        amount = form.money
+      }
+      form.moneyShow = amount
+      form.money = amount
+      this.form = Object.assign({}, form)
+      this.$emit('amount', this.name, amount)
+    },
+    // 重置
+    reset() {
+      this.form = Object.assign({}, {})
+    },
+  },
+}
+</script>
+
+<style></style>