封装金额组件输入框

最新推荐文章于 2024-06-12 16:06:49 发布

weixin_42777161

最新推荐文章于 2024-06-12 16:06:49 发布

阅读量543

点赞数 8

文章标签： git

本文链接：https://blog.csdn.net/weixin_42777161/article/details/136536839

版权

文章介绍了如何在Vue组件中实现一个货币输入框，包括类型、占位符、值的监听和处理，以及数字格式的规范化，如去除非法字符、保留两位小数等。

摘要由CSDN通过智能技术生成

<template>
  <!-- 输入框 -->
  <el-input
    :type="type"
    :placeholder="placeholder"
    v-model="input"
    @input="inputChange"
    @change="valueChange"
    :maxlength="maxlength"
    clearable
    :disabled="disabled"
  ></el-input>
</template>
<script>
import { formatNumber } from "common/index.js";
export default {
  props: {
    type: {
      type: String,
      default: "text",
    },
    value: {
      type: [String, Number],
      default() {
        return "";
      },
    },
    maxlength: {
      type: Number,
      default: 18,
    },
    placeholder: {
      type: String,
      default: "",
    },
    disabled: {},
  },
  watch: {
    value: {
      handler(val) {
        this.input = val;
      },
      deep: true,
    },
  },
  data() {
    return {
      input: this.value,
    };
  },
  methods: {
    valueChange(e) {
      this.$emit("change", e);
    },
    inputChange(val) {
      let val2 = val
        .replace(/[^\d.]/g, "")
        .replace(/\.{2,}/g, ".")
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".")
        .replace(/^\./g, "")
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //保留了两位小数
      if (val2.indexOf(".") < 0 && val2 != "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (val2.substr(0, 1) == "0" && val2.length == 2) {
          val2 = val2.substr(1, val2.length);
        }
      }

      let result = formatNumber(val2);
      this.input = result;
      this.$emit("input", result);
    },
  },
};
</script>

```javascript
在这里插入代码片

            <moneyInput
              style="width: 200px"
              class="input-num"
              @change="moneyChange"
              v-model="savePlanPopForm.trxnAmt"
            ></moneyInput>