From 95b37590a37d5f2835fcc2f554b43f444282c399 Mon Sep 17 00:00:00 2001 From: zcj <18137693952@163.com> Date: Tue, 9 Aug 2022 21:59:31 +0800 Subject: [PATCH] =?UTF-8?q?feat(input-number):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=AD=A3=E5=88=99=E9=99=90=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__tests__/input-number.spec.tsx | 30 ++++++++- .../input-number/src/input-number-types.ts | 4 ++ .../input-number/src/use-input-number.ts | 6 ++ .../docs/components/input-number/index.md | 65 +++++++++++++++---- 4 files changed, 93 insertions(+), 12 deletions(-) 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 cad428e6ee..54162dc613 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'; @@ -116,4 +116,32 @@ describe('d-input-number', () => { expect(inputWrap.classes()).toContain(noDotNs.m('lg')); 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(); + }); }); 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 事件