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部分

<script>
    Vue.component("currency-input", {
        template: '\
            <div class="el-input el-input--small">\
                <input class="el-input__inner"\
                    v-bind:value="formatValue"\
                    ref="input"\
                    v-on:input="updatevalue($event.target.value)"\
                    v-on:blur="onBlur"\
                    v-on:focus="selectAll"/>\
            </div>\
        ',
        props: {
            value: {
                type: [String, Number],
                default: 0,
                desc: '数值'
            },
            symbol: {
                type: String,
                default: '',
                desc: '货币标识符'
            },
            decimal: {
                type: Number,
                default: 2,
                desc: '小数位'
            }
        },
        data() {
            return {
                focused: false,
            }
        },
        computed: {
            formatValue() {
                if (this.focused) {
                    return accounting.unformat(this.value);
                } else {
                    return accounting.formatMoney(this.value, this.symbol, this.decimal);
                }
            }
        },
        methods: {
            updatevalue(value) {
                var formatvalue = 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));
              }
            }
        },
    })
    new Vue({
        el: "#app",
        data() {
            return {
                price: ""
            }
        },
        created() {
            setTimeout(() => {
                this.price = 1100;
            }, 1000);
        },
        methods: {
            submit() {
                console.log(this.price)
            },
            inputBlur() {
                console.log("触发了自定义事件");
            }
        },
    })
</script>

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

currencyInput/CurrencyInput.vue

<template>
  <div>
    <div class="el-input el-input--small">
      <input class="el-input__inner" v-bind:value="formatValue" ref="input" v-on:input="updatevalue($event.target.value)" v-on:blur="onBlur" v-on:focus="selectAll" />
    </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: "小数位"
    },
    elvalue: [String, Number]
  },
  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);
        }
      }
    }
  },
  methods: {
    updatevalue(value) {
      var formatvalue = !!value ? accounting.unformat(value) : "";
      this.$emit("input", formatvalue);
    },
    onBlur() {
      this.focused = false;
      this.$emit("blur", event);
      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

转载于:https://www.cnblogs.com/wjs0509/p/11151373.html