Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 790ea30

Browse files
authoredAug 10, 2022
feat(input-number): 增加正则限制 (#1207)
1 parent 4c4fb9a commit 790ea30

File tree

4 files changed

+93
-12
lines changed

4 files changed

+93
-12
lines changed
 

‎packages/devui-vue/devui/input-number/__tests__/input-number.spec.tsx

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { mount } from '@vue/test-utils';
2-
import { ref } from 'vue';
2+
import { nextTick, ref } from 'vue';
33
import DInputNumber from '../src/input-number';
44
import { useNamespace } from '../../shared/hooks/use-namespace';
55

@@ -117,6 +117,34 @@ describe('d-input-number', () => {
117117
wrapper.unmount();
118118
});
119119

120+
121+
it('regular expression check', async () => {
122+
const num = ref(2);
123+
const wrapper = mount({
124+
setup() {
125+
// 1到50
126+
const regStr = '^([1-9]|[1-4][0-9]|50)$';
127+
return () => <DInputNumber v-model={num.value} reg={regStr}></DInputNumber>;
128+
},
129+
});
130+
131+
const inputInner = wrapper.find(ns.e('input-box'));
132+
expect((inputInner.element as HTMLInputElement).value).toBe('2');
133+
134+
num.value = 51;
135+
expect((inputInner.element as HTMLInputElement).value).toBe('2');
136+
137+
num.value = 10;
138+
await nextTick();
139+
expect((inputInner.element as HTMLInputElement).value).toBe('10');
140+
141+
// 0 不符合要求返回上次结果 10
142+
num.value = 0;
143+
expect((inputInner.element as HTMLInputElement).value).toBe('10');
144+
145+
wrapper.unmount();
146+
});
147+
120148
it.todo('props placeholder work well.');
121149

122150
it.todo('event change/focus/blur/input work well.');

‎packages/devui-vue/devui/input-number/src/input-number-types.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ export const inputNumberProps = {
3232
precision: {
3333
type: Number,
3434
},
35+
reg: {
36+
type: [RegExp, String] as PropType<RegExp | string>,
37+
default: '',
38+
},
3539
} as const;
3640

3741
export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>;

‎packages/devui-vue/devui/input-number/src/use-input-number.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,12 @@ export function useEvent(props: InputNumberProps, ctx: SetupContext, inputRef: R
107107
};
108108

109109
const correctValue = (value: number | string | undefined | null) => {
110+
// 校验正则
111+
const valueStr = value + '';
112+
if (props.reg && !valueStr.match(new RegExp(props.reg))) {
113+
return undefined;
114+
}
115+
110116
let newVal = Number(value);
111117
// 不是0 是假值或者是NaN返回undefined
112118
if (newVal !== 0 && (!Number(value) || Number.isNaN(newVal))) {

‎packages/devui-vue/docs/components/input-number/index.md

Lines changed: 54 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export default defineComponent({
159159
import { defineComponent, ref } from 'vue';
160160
161161
export default defineComponent({
162-
setup(props) {
162+
setup() {
163163
const num1 = ref(1);
164164
const num2 = ref(2);
165165
const num3 = ref(3);
@@ -181,18 +181,61 @@ export default defineComponent({
181181

182182
:::
183183

184+
### 正则限制
185+
186+
:::demo 允许传入正则或正则字符串限制输入,输入时会优先匹配传入的正则,不输入则不限制。
187+
188+
```vue
189+
<template>
190+
<div>
191+
<div class="space">reg</div>
192+
<d-input-number v-model="num1" :reg="reg"></d-input-number>
193+
194+
<div class="space">regStr</div>
195+
<d-input-number v-model="num2" :reg="regStr"></d-input-number>
196+
</div>
197+
</template>
198+
<script>
199+
import { defineComponent, ref } from 'vue';
200+
201+
export default defineComponent({
202+
setup() {
203+
const reg = /^(-|\+)?\d*$/;
204+
const regStr = '^(-|\\+)*\\d*$';
205+
const num1 = ref(1);
206+
const num2 = ref(2);
207+
return {
208+
num1,
209+
num2,
210+
reg,
211+
regStr
212+
};
213+
},
214+
});
215+
</script>
216+
<style>
217+
.space {
218+
padding: 5px 0;
219+
font-size: 16px;
220+
}
221+
</style>
222+
```
223+
224+
:::
225+
184226
### InputNumber 参数
185227

186-
| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
187-
| :---------- | :-------------- | :-------- | :----------------------- | :-------------------- |
188-
| v-model | `number` | -- | 可选,文本框的值 | [基本用法](#基本用法) |
189-
| step | `number` | 1 | 可选,步数 | [步数](#步数) |
190-
| placeholder | `string` | -- | 可选,文本框 placeholder | [基本用法](#基本用法) |
191-
| max | `number` | Infinity | 可选,输入框的最大值 max | [数值范围](#数值范围) |
192-
| min | `number` | -Infinity | 可选,输入框的最小值 min | [数值范围](#数值范围) |
193-
| disabled | `boolean` | false | 可选,文本框是否被禁用 | [禁用状态](#禁用状态) |
194-
| precision | `number` | -- | 可选,数值精度 | [精度](#精度) |
195-
| size | [ISize](#isize) | 'md' | 可选,文本框尺寸 | [尺寸](#尺寸) |
228+
| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
229+
|:------------|:----------------|:-----------|:-------------------|:-------------------|
230+
| v-model | `number` | -- | 可选,文本框的值 | [基本用法](#基本用法) |
231+
| step | `number` | 1 | 可选,步数 | [步数](#步数) |
232+
| placeholder | `string` | -- | 可选,文本框 placeholder | [基本用法](#基本用法) |
233+
| max | `number` | Infinity | 可选,输入框的最大值 max | [数值范围](#数值范围) |
234+
| min | `number` | -Infinity | 可选,输入框的最小值 min | [数值范围](#数值范围) |
235+
| disabled | `boolean` | false | 可选,文本框是否被禁用 | [禁用状态](#禁用状态) |
236+
| precision | `number` | -- | 可选,数值精度 | [精度](#精度) |
237+
| size | [ISize](#isize) | 'md' | 可选,文本框尺寸 | [尺寸](#尺寸) |
238+
| reg | `RegExp\| string` | -- | 可选,用于限制输入的正则或正则字符串 | [正则限制](#正则限制)|
196239

197240
### InputNumber 事件
198241

0 commit comments

Comments
 (0)
Please sign in to comment.