@arco-vue-pro-components/pro-components/es/pro-input-number/component.js

基于@arco-design/web-vue组件的高级组件，包括pro-table

import { defineComponent, toRefs, ref, computed, createVNode, mergeProps } from "vue";
import { omit } from "../_utils/omit.js";
import { formatterDecimal, toCapital } from "./util.js";
import { getPrefixCls } from "../_utils/index.js";
import { InputNumber } from "@arco-design/web-vue";
const noPrecisionTypeArr = ["money", "int"];
var _ProInputNumber = defineComponent({
  name: "ProInputNumber",
  props: {
    type: {
      type: String,
      default: "decimal"
    },
    intPartNumber: Number,
    capitalUnit: {
      type: String,
      default: "\u5143"
    },
    showCapital: {
      type: Boolean,
      default: false
    },
    maxLength: Number,
    modelValue: Number,
    defaultValue: Number,
    precision: Number,
    disabled: {
      type: Boolean,
      default: false
    },
    error: {
      type: Boolean,
      default: false
    },
    max: {
      type: Number
    },
    min: {
      type: Number,
      default: -Infinity
    },
    placeholder: String,
    size: {
      type: String
    },
    allowClear: {
      type: Boolean,
      default: true
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    onChange: {
      type: Function
    },
    onFocus: {
      type: Function
    },
    onBlur: {
      type: Function
    },
    onClear: {
      type: Function
    },
    onInput: {
      type: Function
    }
  },
  setup(props, {
    slots,
    attrs,
    emit
  }) {
    const {
      showCapital
    } = toRefs(props);
    const capitalStr = ref("");
    const prefixCls = getPrefixCls("input-decimal");
    const config = computed(() => {
      let newPrecision;
      let newIntPartNumber;
      let isCapital = false;
      switch (props.type) {
        case "decimal":
          newPrecision = 2;
          newIntPartNumber = 13;
          break;
        case "digit":
        case "int":
          newPrecision = 0;
          newIntPartNumber = 13;
          break;
        case "money":
          newPrecision = props.capitalUnit === "\u4E07\u5143" ? 6 : 2;
          newIntPartNumber = props.capitalUnit === "\u4E07\u5143" ? 9 : 13;
          isCapital = true;
          break;
        case "percent":
          newPrecision = 3;
          newIntPartNumber = 3;
          break;
      }
      if (props.intPartNumber) {
        newIntPartNumber = props.intPartNumber;
      }
      if (props.precision && !isCapital && !noPrecisionTypeArr.includes(props.type)) {
        newPrecision = props.precision;
      }
      return {
        precision: newPrecision,
        intPartNumber: newIntPartNumber,
        isCapital,
        suffix: isCapital ? props.capitalUnit : props.type === "percent" ? "%" : void 0,
        max: props.max || (props.type === "percent" ? 100 : void 0)
      };
    });
    const formatter = (value) => {
      const newValueObj = formatterDecimal(value, config.value.precision, config.value.isCapital, config.value.intPartNumber);
      if (config.value.isCapital) {
        capitalStr.value = toCapital(newValueObj.value, props.capitalUnit, config.value.precision);
      }
      return newValueObj.text;
    };
    const renderSuffix = () => {
      return config.value.suffix;
    };
    const restProps = computed(() => omit(props, ["precision", "formatter", "parser"]));
    return () => {
      const _slots = {
        prepend: slots.prepend,
        suffix: slots.suffix || (config.value.suffix ? renderSuffix : void 0),
        prefix: slots.prefix,
        append: slots.append
      };
      return createVNode("div", {
        "class": `${prefixCls}-container`,
        "style": {
          width: "100%"
        }
      }, [createVNode(InputNumber, mergeProps({
        "class": `${prefixCls}-input`,
        "formatter": formatter,
        "parser": (value) => {
          return value.replace(/[^0-9.]/g, "");
        }
      }, restProps.value, {
        "onClear": () => {
          capitalStr.value = "";
        },
        "hideButton": true,
        "min": props.min || 0,
        "max": config.value.max,
        "style": {
          width: "100%"
        }
      }, attrs), _slots), config.value.isCapital && showCapital.value && createVNode("div", {
        "class": `${prefixCls}-capital`
      }, [capitalStr.value])]);
    };
  }
});
export { _ProInputNumber as default };