birdpaper-ui/es/inputNumber/src/inputNumber.vue2.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

import { isNull } from "../../utils/util.js";
import { defineComponent, ref, computed, watch } from "vue";
import { IconArrowDownSLine, IconArrowUpSLine } from "birdpaper-icon";
const _sfc_main = defineComponent({
  name: "InputNumber",
  props: {
    /** 绑定值 Binding value */
    modelValue: { type: [Number, String] },
    /** 输入框尺寸 Size of the input */
    size: { type: String, default: "normal" },
    /** 是否禁用 Disabled or not */
    disabled: { type: Boolean, default: false },
    /** 是否只读状态 Readonly or not */
    readonly: { type: Boolean, default: false },
    /** 是否警示状态 Danger or not */
    isDanger: { type: Boolean, default: false },
    /** 占位提示文字 The placeholder text */
    placeholder: { type: String, default: "" },
    /** 是否隐藏按钮 */
    hideButton: { type: Boolean, default: false },
    /** 数字精度 */
    precision: { type: Number },
    /** 数字变化步长 */
    step: { type: Number, default: 1 },
    /** 最小值 */
    min: { type: Number },
    /** 最大值 */
    max: { type: Number }
  },
  emits: ["update:modelValue", "input", "blur"],
  setup(props, { emit }) {
    const name = "bp-input-number";
    const inputRef = ref();
    const mergePrecision = computed(() => {
      var _a, _b;
      const stepPrecisioin = ((_b = (_a = props.step.toString()) == null ? void 0 : _a.split(".")[1]) == null ? void 0 : _b.length) || 0;
      if (!props.precision)
        return stepPrecisioin;
      return props.precision > stepPrecisioin ? props.precision : stepPrecisioin;
    });
    const isMin = computed(() => Number(global_value.value) === props.min);
    const isMax = computed(() => Number(global_value.value) === props.max);
    const handleStep = (type) => {
      if (props.hideButton || !props.step)
        return;
      inputRef.value.handleFocus();
      var val = Number(global_value.value);
      if (type === "up" && !isMax.value) {
        val += props.step;
      }
      if (type === "down" && !isMin.value) {
        val -= props.step;
      }
      global_value.value = getValue(val);
      updateValue();
    };
    const getValue = (val) => {
      if (!val || val === "")
        return "";
      return mergePrecision.value && mergePrecision.value >= 0 ? Number(val).toFixed(mergePrecision.value) : val.toString();
    };
    const global_value = ref(getValue(props.modelValue) || "");
    const handleStatus = () => {
      let value = global_value.value;
      if (!isNull(props.min) && Number(value) < props.min) {
        return props.min.toString();
      }
      if (!isNull(props.max) && Number(value) > props.max) {
        return props.max.toString();
      }
      return value.toString();
    };
    const onInput = (value) => {
      if (value === "") {
        global_value.value = "";
        return updateValue();
      }
      value = value.trim().replace(/。/g, ".");
      if (Number(value) || /^(\.|-)$/.test(value)) {
        global_value.value = value;
        return updateValue();
      }
      global_value.value = value.replace(/^(\.?|-)$/g, "");
      global_value.value = value.replace(/[^\d.]/g, "");
      global_value.value = getValue(parseFloat(global_value.value));
      return;
    };
    const onBlur = () => {
      global_value.value = getValue(handleStatus());
      updateValue();
      emit("blur");
    };
    const updateValue = () => {
      emit("update:modelValue", parseFloat(global_value.value) || "");
      emit("input", parseFloat(global_value.value) || "");
    };
    updateValue();
    watch(
      () => props.modelValue,
      (value) => {
        global_value.value = getValue(value || "");
      }
    );
    return {
      name,
      inputRef,
      global_value,
      isMax,
      isMin,
      handleStep,
      onInput,
      onBlur,
      IconArrowDownSLine,
      IconArrowUpSLine
    };
  }
});
export {
  _sfc_main as default
};