[Vue + element] text box component that can only input numbers and control decimal places (automatically fill in decimal place 0)

Time:2021-1-22

design sketch

[Vue + element] text box component that can only input numbers and control decimal places (automatically fill in decimal place 0)

major function

  1. Only numbers and decimals can be entered
  2. You can customize the number of decimal points specified
  3. Auto fill 0 of decimal places

Preparatory work

There is one that can be usedElementVue project for

Subcomponents

  1. staycomponents/MagicCreate under directoryNumberInput.vuefile
    [Vue + element] text box component that can only input numbers and control decimal places (automatically fill in decimal place 0)
  2. Customize the required attribute values and events according to your own needs. Here you only write what you think you may need. If you need more attributes, you can add them in props
<template>
  <el-input v-model="val" :placeholder="placeholder" @input="input" @change="change" clearable />
</template>

<script>
export default {
  name: "NumberInput",
  props: {
    placeholder: {
      type: String,
      Default: "please enter...",
    },
    value: {
      //Default value
      Type: undefined, // undefined indicates that it can pass through any type
      default: "0",
    },
    decimal: {
      //Control the number of decimal places, the default is 2
      type: Number,
      default: 2,
    },
  },
  model: {
    Prop: "value", // value passed (value of text box)
    Event: "change" // defined event
  },
  data() {
    return {
      val: this.value,
    };
  },
  mounted() {
    if (this.value) {
      //Judge whether the initial value is a normal floating-point number and process it
      this.val = this.handelValue(this.value);
      this.change();
    }
  },
  methods: {
    //input
    input() {
      this.val = this.handelValue(this.val);
      this.$emit("input", this.val);
    },
    //Process the input value and return the number and decimal point
    handelValue(value) {
      return value
        . replace (/ [^ D.] / g, ") // controls that only decimal points or numbers can be entered
        . replace (/ \. {2,} / g, ".) // control can only have one continuous decimal point
        .replace(".", "_ ") // replace the first decimal point with another character
        . replace (/ \. / g, ") // set other decimal points to empty strings
        .replace("_ ",". ") // finally, replace other characters with decimal point
        .replace(
          new RegExp(`^(-)*(\\d+)\\.(\\d{${this.decimal}}).*$`),
          "$1$2.$3"
        ); // controls the number of decimal places. By default, the number of decimal places is up to two
    },
    //change
    change() {
      this.val = this.fillZero(this.val);
      //Trigger the change event defined in the model through $emit to pass the internal value to the parent component
      this.$emit("change", this.val);
    },
    //After the change, the decimal places are automatically added to 0
    fillZero(value) {
      //Judge whether there is a decimal point
      if (/(?<=\.)\d*$/g.test(value)) {
        //Judge whether the decimal number is equal to the decimal value
        if (value.match(/(?<=\.)\d*$/g)[0].length != this.decimal) {
          //Match the decimal point with all the numbers after it, and then fill in 0 after it
          value = value.replace(
            /\..*$/,
            `.${value.match(/(?<=\.)\d*$/g)[0].padEnd(this.decimal, "0")}`
          );
        }
      } else {
        if(value != '' || value != 0){
        value = `${value}.${new Array(this.decimal).fill("0").join("")}`;
        //Use the array filling method to fill the string. If there is a better way to fill the comment area, please let me know
        }
      }
      return value;
    },
  },
};
</script>

<style lang='scss' scoped>
</style>

Parent component

<template>
  <div class="Test">
    <number-input v-model="value" :value="value" style="width:300px;"/>
    <div>{{value}}</div>
  </div>
</template>

<script>
Import numberinput from "@ / components / Magic / numberinput"; // import subcomponents
export default {
  name: "Test",
  components: { NumberInput },
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style>
</style>

last

If there are any problems and improvement methods in this component, please let me know in the comments area. Thank you

Recommended Today

Modify the code of typora to support mixed sorting of folders and files

Write notes with markdown files and classify them with folders. The whole note document project forms a tree structure. There is often a specific order between note articles and between articles and categories, so a numeric prefix is added in front of the file name to control the sorting. However, the windows file system always […]