vue中使用自定义金额格式化组件，对金额进行千分位格式化

分两种情况：不使用vue/cli脚手架搭建和使用vue/cli脚手架搭建的项目

一、不使用vue/cli脚手架搭建

1、该组件基于vue，element，accountingjs

2、引入相应的js文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/accounting.js/0.4.1/accounting.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3、如何使用：html部分

<div id="app">
    <div style="display:inline-block">
        <currency-input v-model="price" :decimal="4" style="width:200px;" @blur="inputBlur"></currency-input>
        <el-button type="primary" size="small" @click="submit">提交</el-button>
    </div>
</div>

4、如何使用：js部分

Vue.component('currency-input', {
  template: '\
                <div class="el-input el-input--small" v-bind:class="{\'is-disabled\':disabled}">\
                    <input\
                        ref="input"\
                        v-bind:value="formatValue"\
                        v-on:input="onInput($event.target.value)"\
                        v-on:focus="selectAll"\
                        v-on:blur="onBlur"\
                        v-bind:disabled="disabled"\
                        class="el-input__inner"\
                    >\
                </div>\
            ',
  props: {
    value: {
      type: [String, Number],
      default: 0,
      desc: '数值'
    },
    symbol: {
      type: String,
      default: "",
      desc: '货币标识符'
    },
    decimal: {
      type: Number,
      default: 2,
      desc: '小数位'
    },
    disabled: {
      type: Boolean,
      default: false,
      desc: "是否禁止"
    }
  },
  data() {
    return {
      focused: false
    };
  },
  computed: {
    formatValue() {
      if (this.focused) {
        return this.$accounting.unformat(this.value);
      } else {
        return this.$accounting.formatMoney(this.value, this.symbol, this.decimal);
      }
    }
  },
  watch: {
    value(val) {if (this.validateEvent) {
        this.dispatch('ElFormItem', 'el.form.change', [val]);
      }
    },
  },
  methods: {
    onInput(value) {
      var formatvalue = this.$accounting.unformat(value);
      this.$emit("input", formatvalue);
    },
    onBlur() {
      this.focused = false;
      this.$emit("blur");
      this.dispatch("ElFormItem", "el.form.blur", [this.value]);
    },
    selectAll(event) {
      this.focused = true;
      setTimeout(function () {
        event.target.select()
      }, 0)
    },
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    }
  }
});

二、使用vue/cli脚手架搭建

currencyInput/CurrencyInput.vue

<template>
  <div>
    <div class="el-input el-input--small" v-bind:class="{'is-disabled':disabled}">
      <input class="el-input__inner" v-bind:value="formatValue" v-on:input="updatevalue($event.target.value)" v-on:blur="onBlur" v-on:focus="selectAll" v-bind:disabled="disabled" />
    </div>
  </div>
</template>

<script>
import accounting from "accounting";
export default {
  props: {
    value: {
      type: [String, Number],
      default: 0,
      desc: "数值",
    },
    symbol: {
      type: String,
      default: "",
      desc: "货币标识符",
    },
    decimal: {
      type: Number,
      default: 2,
      desc: "小数位",
    },
    disabled: {
      type: Boolean,
      default: false,
      desc: "是否禁止",
    },
  },
  data() {
    return {
      focused: false,
    };
  },
  computed: {
    formatValue() {
      if (this.focused) {
        return this.value ? accounting.unformat(this.value) : "";
      } else {
        if (this.value === 0) {
          return accounting.formatMoney(this.value, this.symbol, this.decimal);
        } else if (
          this.value === "" ||
          this.value === null ||
          this.value === undefined
        ) {
          return "";
        } else {
          return accounting.formatMoney(this.value, this.symbol, this.decimal);
        }
      }
    },
  },
  watch: {
    value(val) {if (this.validateEvent) {
        this.dispatch("ElFormItem", "el.form.change", [val]);
      }
    },
  },
  methods: {
    updatevalue(value) {
      var formatvalue = !!value ? accounting.unformat(value) : "";
      this.$emit("input", formatvalue);
    },
    onBlur() {
      this.focused = false;
      this.$emit("blur");
      this.dispatch("ElFormItem", "el.form.blur", [this.value]);
    },
    selectAll(event) {
      this.focused = true;
      setTimeout(() => {
        event.target.select();
      }, 0);
    },

    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
  },
};
</script>

currencyInput/index.js

import currencyInputComponent from "./CurrencyInput";

const currencyInput = {
    install:function(Vue){
        Vue.component("currency-input",currencyInputComponent)
    }
}

export default currencyInput

main.js

// 自定义金额格式化组件，并全局注册
import currencyInput from "./components/CurrencyInput";
Vue.use(currencyInput)

import accounting from 'accounting'

使用方法

<currency-input v-model="bhform.regCaptial"></currency-input>

 github地址：https://github.com/wjs0509/vue-currency-input