zoukankan      html  css  js  c++  java
  • 金额格式化vue组件实现

        // 金额格式化组件 
        /**
         * 金额格式化组件
         * 接入方法 <money-input v-model=""></money-input>
        */
      Vue.component("money-input", {
        template: '<input ref="money" :type="type" @input="input" v-model="money" @blur="setmoney" @focus="getmoney" />',
        props: ["value"],
        data() {
          return {
            money: "",
            type: "text"
          }
        },
        computed: {
        },
        watch: {
          "value": "ajax_getmoney"
        },
        created() {
          this.ajax_getmoney();
        },
        methods: {
          ajax_getmoney() {
            if (this.money !== this.value) {
              this.money = this.value;
              this.$nextTick(function () {
                this.$refs.money.value = this.money_change(this.money);
              });
            }
          },
          input(e) {
            this.$emit('input', this.money);
          },
          setmoney(e) {
            this.type = "text";
            this.$nextTick(function () {
              e.target.value = this.money_change(e.target.value);
              this.$emit('update:value', this.money);
            });
          },
          getmoney(e) {
            this.type = "number";
            this.$nextTick(function () {
              e.target.value = this.money;
            });
          },
          money_change(val) {
            if (val === "") {
              return "";
            }
            val = val.toString().replace(/$|\,/g, "");
            if (isNaN(val)) {
              val = "0";
            }
            let sign = (val == (val = Math.abs(val)));
            val = Math.floor(val * 100 + 0.50000000001);
            let cents = val % 100;
            val = Math.floor(val / 100).toString();
            if (cents < 10) {
              cents = "0" + cents;
            }
            for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
              val = val.substring(0, val.length - (4 * i + 3)) + "," + val.substring(val.length - (4 * i + 3));
            }
            return (((sign) ? "" : "-") + val + "." + cents);
          }
        },
      });
      // 金额格式化组件
     
     
     
    使用方式
    html:
    <money-input v-model="num"></money-input>
    js:
        data() {
          return {
            num: "12345"
          }
        }
  • 相关阅读:
    五、Django的模板渲染和继承
    四、Django的views
    三、Django的urls
    ubuntu超过4G如何备份成iso文件
    15张vim速查表
    这样配置你的IDEA工作效率提高好几倍!
    git用法
    数据库 | MySQL日志管理
    异常处理
    池 concurrent.futrues
  • 原文地址:https://www.cnblogs.com/sgqwjr/p/14036570.html
Copyright © 2011-2022 走看看