实现 vue3 正整数输入框组件

1.实现代码

components/InputInteger.vue

<!-- 正整数输入框 -->
<template><el-input v-model="_value" @input="onInput" maxlength="9" clearable />
</template><script lang="ts" setup>
import { ref } from "vue";const props = withDefaults(defineProps<{modelValue?: number | string;min?: number;max?: number;}>(),{min: 1}
);
const emit = defineEmits(["update:modelValue"]);const _value = ref(props.modelValue);const onInput = (val: string | undefined) => {const result = verifyValue(val); // 拦截输入,进行校验_value.value = result;emit("update:modelValue", result);
};const verifyValue = (value: string | undefined): number | string | undefined => {const { max, min } = props;let result = value;let newVal = Number(value);if (isNil(value) || Number.isNaN(newVal) || hasDot(value)) {return props.modelValue; // 保持输入前的数值}if (value === "") {return undefined;}if (max && newVal > max) {result = String(max);}if (min && newVal < min) {result = String(min);}return result;
};// 判断null或undefined
const isNil = (value: any) => {return value == null;
};// 判断是否包含.字符
const hasDot = (value: any) => {return String(value).includes(".");
};
</script>

2.全局引入

main.ts

const app = createApp(App);app.config.errorHandler = errorHandler;// register the global component
app.component("InputInteger", InputInteger);

3.TS类型声明

src/typings/global-components.d.ts

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Read more: https://github.com/vuejs/core/pull/3399
export {};declare module "vue" {export interface GlobalComponents {InputInteger: (typeof import("../components/InputInteger.vue"))["default"];}
}

4. 配置 JSX/TSX 类型推断

参考：https://cn.vuejs.org/guide/extras/render-function.html#jsx-type-inference

tsconfig.json

{"compilerOptions": {"jsx": "preserve","jsxImportSource": "vue" // 指定了 TypeScript 编译 JSX 时应该从哪个库（vue/react）导入 JSX 工厂函数// ...}
}