diff --git a/packages/devui-vue/devui/input-number/__tests__/input-number.spec.tsx b/packages/devui-vue/devui/input-number/__tests__/input-number.spec.tsx
index 471fd9e5cc..4f81404b8f 100644
--- a/packages/devui-vue/devui/input-number/__tests__/input-number.spec.tsx
+++ b/packages/devui-vue/devui/input-number/__tests__/input-number.spec.tsx
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils';
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
import DInputNumber from '../src/input-number';
import { useNamespace } from '../../shared/hooks/use-namespace';
@@ -117,6 +117,34 @@ describe('d-input-number', () => {
wrapper.unmount();
});
+
+ it('regular expression check', async () => {
+ const num = ref(2);
+ const wrapper = mount({
+ setup() {
+ // 1到50
+ const regStr = '^([1-9]|[1-4][0-9]|50)$';
+ return () => ;
+ },
+ });
+
+ const inputInner = wrapper.find(ns.e('input-box'));
+ expect((inputInner.element as HTMLInputElement).value).toBe('2');
+
+ num.value = 51;
+ expect((inputInner.element as HTMLInputElement).value).toBe('2');
+
+ num.value = 10;
+ await nextTick();
+ expect((inputInner.element as HTMLInputElement).value).toBe('10');
+
+ // 0 不符合要求返回上次结果 10
+ num.value = 0;
+ expect((inputInner.element as HTMLInputElement).value).toBe('10');
+
+ wrapper.unmount();
+ });
+
it.todo('props placeholder work well.');
it.todo('event change/focus/blur/input work well.');
diff --git a/packages/devui-vue/devui/input-number/src/input-number-types.ts b/packages/devui-vue/devui/input-number/src/input-number-types.ts
index 314f23f508..6e250269c5 100644
--- a/packages/devui-vue/devui/input-number/src/input-number-types.ts
+++ b/packages/devui-vue/devui/input-number/src/input-number-types.ts
@@ -32,6 +32,10 @@ export const inputNumberProps = {
precision: {
type: Number,
},
+ reg: {
+ type: [RegExp, String] as PropType,
+ default: '',
+ },
} as const;
export type InputNumberProps = ExtractPropTypes;
diff --git a/packages/devui-vue/devui/input-number/src/use-input-number.ts b/packages/devui-vue/devui/input-number/src/use-input-number.ts
index d688dbd5cc..56d353f565 100644
--- a/packages/devui-vue/devui/input-number/src/use-input-number.ts
+++ b/packages/devui-vue/devui/input-number/src/use-input-number.ts
@@ -107,6 +107,12 @@ export function useEvent(props: InputNumberProps, ctx: SetupContext, inputRef: R
};
const correctValue = (value: number | string | undefined | null) => {
+ // 校验正则
+ const valueStr = value + '';
+ if (props.reg && !valueStr.match(new RegExp(props.reg))) {
+ return undefined;
+ }
+
let newVal = Number(value);
// 不是0 是假值或者是NaN返回undefined
if (newVal !== 0 && (!Number(value) || Number.isNaN(newVal))) {
diff --git a/packages/devui-vue/docs/components/input-number/index.md b/packages/devui-vue/docs/components/input-number/index.md
index 7388029140..2f32e27072 100644
--- a/packages/devui-vue/docs/components/input-number/index.md
+++ b/packages/devui-vue/docs/components/input-number/index.md
@@ -159,7 +159,7 @@ export default defineComponent({
import { defineComponent, ref } from 'vue';
export default defineComponent({
- setup(props) {
+ setup() {
const num1 = ref(1);
const num2 = ref(2);
const num3 = ref(3);
@@ -181,18 +181,61 @@ export default defineComponent({
:::
+### 正则限制
+
+:::demo 允许传入正则或正则字符串限制输入,输入时会优先匹配传入的正则,不输入则不限制。
+
+```vue
+
+
+
+
+
+```
+
+:::
+
### InputNumber 参数
-| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
-| :---------- | :-------------- | :-------- | :----------------------- | :-------------------- |
-| v-model | `number` | -- | 可选,文本框的值 | [基本用法](#基本用法) |
-| step | `number` | 1 | 可选,步数 | [步数](#步数) |
-| placeholder | `string` | -- | 可选,文本框 placeholder | [基本用法](#基本用法) |
-| max | `number` | Infinity | 可选,输入框的最大值 max | [数值范围](#数值范围) |
-| min | `number` | -Infinity | 可选,输入框的最小值 min | [数值范围](#数值范围) |
-| disabled | `boolean` | false | 可选,文本框是否被禁用 | [禁用状态](#禁用状态) |
-| precision | `number` | -- | 可选,数值精度 | [精度](#精度) |
-| size | [ISize](#isize) | 'md' | 可选,文本框尺寸 | [尺寸](#尺寸) |
+| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
+|:------------|:----------------|:-----------|:-------------------|:-------------------|
+| v-model | `number` | -- | 可选,文本框的值 | [基本用法](#基本用法) |
+| step | `number` | 1 | 可选,步数 | [步数](#步数) |
+| placeholder | `string` | -- | 可选,文本框 placeholder | [基本用法](#基本用法) |
+| max | `number` | Infinity | 可选,输入框的最大值 max | [数值范围](#数值范围) |
+| min | `number` | -Infinity | 可选,输入框的最小值 min | [数值范围](#数值范围) |
+| disabled | `boolean` | false | 可选,文本框是否被禁用 | [禁用状态](#禁用状态) |
+| precision | `number` | -- | 可选,数值精度 | [精度](#精度) |
+| size | [ISize](#isize) | 'md' | 可选,文本框尺寸 | [尺寸](#尺寸) |
+| reg | `RegExp\| string` | -- | 可选,用于限制输入的正则或正则字符串 | [正则限制](#正则限制)|
### InputNumber 事件