birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
120 lines (119 loc) • 3.99 kB
JavaScript
;
const util = require("../../utils/util.js");
const vue = require("vue");
const birdpaperIcon = require("birdpaper-icon");
const _sfc_main = vue.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 = vue.ref();
const mergePrecision = vue.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 = vue.computed(() => Number(global_value.value) === props.min);
const isMax = vue.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 = vue.ref(getValue(props.modelValue) || "");
const handleStatus = () => {
let value = global_value.value;
if (!util.isNull(props.min) && Number(value) < props.min) {
return props.min.toString();
}
if (!util.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();
vue.watch(
() => props.modelValue,
(value) => {
global_value.value = getValue(value || "");
}
);
return {
name,
inputRef,
global_value,
isMax,
isMin,
handleStep,
onInput,
onBlur,
IconArrowDownSLine: birdpaperIcon.IconArrowDownSLine,
IconArrowUpSLine: birdpaperIcon.IconArrowUpSLine
};
}
});
module.exports = _sfc_main;