diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue index e033242b245..4b6052e43eb 100644 --- a/packages/varlet-ui/src/input/Input.vue +++ b/packages/varlet-ui/src/input/Input.vue @@ -98,7 +98,7 @@ import VarFormDetails from '../form-details' import VarIcon from '../icon' import { defineComponent, getCurrentInstance, ref, computed, nextTick } from 'vue' import { props } from './props' -import { isEmpty, isNumber, toNumber } from '../utils/shared' +import { isEmpty } from '../utils/shared' import { useValidation } from '../utils/components' import { useForm } from '../form/provide' import type { Ref, ComputedRef } from 'vue' @@ -116,20 +116,6 @@ export default defineComponent({ const id: Ref = ref(`var-input-${getCurrentInstance()!.uid}`) const el: Ref = ref(null) const isFocus: Ref = ref(false) - const isNumberValue: ComputedRef = computed(() => isNumber(props.modelValue)) - const type: ComputedRef<'number' | 'text' | 'password'> = computed(() => { - const { type } = props - - if (type === 'password') { - return type - } - - if (isNumberValue.value) { - return 'number' - } - - return 'text' - }) const maxlengthText: ComputedRef = computed(() => { const { maxlength, modelValue } = props @@ -170,8 +156,6 @@ export default defineComponent({ } } - const normalizeValue = (value: string) => (isNumberValue.value ? toNumber(value) : value) - const handleFocus = (e: FocusEvent) => { isFocus.value = true @@ -188,17 +172,16 @@ export default defineComponent({ const handleInput = (e: Event) => { const { value } = e.target as HTMLInputElement - const normalizedValue = normalizeValue(value) - props['onUpdate:modelValue']?.(normalizedValue) - props.onInput?.(normalizedValue, e) + props['onUpdate:modelValue']?.(value) + props.onInput?.(value, e) validateWithTrigger('onInput') } const handleChange = (e: Event) => { const { value } = e.target as HTMLInputElement - props.onChange?.(normalizeValue(value), e) + props.onChange?.(value, e) validateWithTrigger('onChange') } @@ -209,9 +192,8 @@ export default defineComponent({ return } - const value = isNumberValue.value ? 0 : '' - props['onUpdate:modelValue']?.(value) - onClear?.(value) + props['onUpdate:modelValue']?.('') + onClear?.('') validateWithTrigger('onClear') } @@ -230,7 +212,7 @@ export default defineComponent({ // expose const reset = () => { - props['onUpdate:modelValue']?.(isNumberValue.value ? 0 : '') + props['onUpdate:modelValue']?.('') resetValidation() } @@ -257,7 +239,6 @@ export default defineComponent({ return { el, - type, id, isFocus, errorMessage, diff --git a/packages/varlet-ui/src/input/__tests__/index.spec.js b/packages/varlet-ui/src/input/__tests__/index.spec.js index 9fe37da49c5..9a7af79ef84 100644 --- a/packages/varlet-ui/src/input/__tests__/index.spec.js +++ b/packages/varlet-ui/src/input/__tests__/index.spec.js @@ -217,22 +217,3 @@ test('test input validation', async () => { wrapper.unmount() }) - -test('test input number value', async () => { - const onUpdateModelValue = jest.fn((value) => wrapper.setProps({ modelValue: value })) - - const wrapper = mount(VarInput, { - props: { - modelValue: 0, - 'onUpdate:modelValue': onUpdateModelValue, - }, - }) - - wrapper.find('.var-input__input').setValue('1') - await wrapper.find('.var-input__input').trigger('input') - - expect(onUpdateModelValue).lastCalledWith(1) - expect(wrapper.props('modelValue')).toBe(1) - - wrapper.unmount() -}) diff --git a/packages/varlet-ui/src/input/docs/en-US.md b/packages/varlet-ui/src/input/docs/en-US.md index 6abd897f411..67f2e592901 100644 --- a/packages/varlet-ui/src/input/docs/en-US.md +++ b/packages/varlet-ui/src/input/docs/en-US.md @@ -11,8 +11,7 @@ createApp().use(Input) ### Basic Usage -The component automatically analyzes whether the value passed in is a string or a number, -The same type is returned. +The behavior of the input box is consistent with the basic content, and the user can always get a string that conforms to the `type rule when inputting ```js import { ref } from 'vue' @@ -111,9 +110,9 @@ Other values are converted to text as a user prompt. | Prop | Description | Type | Default | | --- | --- | --- | --- | -| `v-model` | The value of the binding | _string \| number_ | `-` | +| `v-model` | The value of the binding | _string_ | `-` | | `placeholder` | placeholder | _string_ | `-` | -| `type` | Input type, The optional value is `text` `password` | _string_ | `text` | +| `type` | Input type, The optional value is `text` `password` `number` | _string_ | `text` | | `maxlength` | Maxlength | _string \| number_ | `-` | | `textarea` | Is it a textarea | _boolean_ | `false` | | `rows` | Number of lines to display in the textarea | _string \| number_ | `8` | @@ -127,7 +126,7 @@ Other values are converted to text as a user prompt. | `clearable` | Whether the clearable | _boolean_ | `false` | | `resize` | Whether textarea can be dragged to resize | _boolean_ | `false` | | `validate-trigger` | Timing to trigger validation, The optional value is `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput` | _ValidateTriggers[]_ | `['onInput', 'onClear']` | -| `rules` | The validation rules, Returns `true` to indicate that the validation passed,The remaining values are converted to text as user prompts | _Array<(v: string \| number) => any>_ | `-` | +| `rules` | The validation rules, Returns `true` to indicate that the validation passed,The remaining values are converted to text as user prompts | _Array<(v: string) => any>_ | `-` | ### Methods @@ -137,7 +136,7 @@ Other values are converted to text as a user prompt. | `blur` | Blur | `-` | `-` | | `validate` | Trigger validate | `-` | `valid: Promise` | | `resetValidation` | Clearing validate messages | `-` | `-` | -| `reset` | Clear the value of the binding(The string type is set to `''`,The number type is set to `0`) and validate messages | `-` | `-` | +| `reset` | Clear the value of the binding and validate messages | `-` | `-` | ### Events @@ -146,9 +145,9 @@ Other values are converted to text as a user prompt. | `focus` | Trigger while focusing | `event: Event` | | `blur` | Triggered when out of focus | `event: Event` | | `click` | Triggered on Click | `event: Event` | -| `clear` | Triggered on Clearance | `value: string | number` | -| `input` | Trigger on input | `value: string | number`
`event: Event` | -| `change` | Trigger on change | `value: string | number`
`event: Event` | +| `clear` | Triggered on Clearance | `value: string` | +| `input` | Trigger on input | `value: string`, `event: Event` | +| `change` | Trigger on change | `value: string`, `event: Event` | ### Slots diff --git a/packages/varlet-ui/src/input/docs/zh-CN.md b/packages/varlet-ui/src/input/docs/zh-CN.md index d35d4e89bb2..933af5e7e00 100644 --- a/packages/varlet-ui/src/input/docs/zh-CN.md +++ b/packages/varlet-ui/src/input/docs/zh-CN.md @@ -11,7 +11,7 @@ createApp().use(Input) ### 基本使用 -组件会自动分析传入的值是字符串还是数字,会返回相同的类型。 +输入框的行为和基本原生一致,用户输入时始终获得一个符合`type`规则的字符串 ```js import { ref } from 'vue' @@ -110,9 +110,9 @@ createApp().use(Icon) | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| `v-model` | 绑定的值 | _string \| number_ | `-` | +| `v-model` | 绑定的值 | _string_ | `-` | | `placeholder` | 占位符 | _string_ | `-` | -| `type` | 输入框类型, 可选值为 `text` `password` | _string_ | `text` | +| `type` | 输入框类型, 可选值为 `text` `password` `number` | _string_ | `text` | | `maxlength` | 最大长度 | _string \| number_ | `-` | | `textarea` | 是否是文本域 | _boolean_ | `false` | | `rows` | 文本域的显示行数 | _string \| number_ | `8` | @@ -126,7 +126,7 @@ createApp().use(Icon) | `clearable` | 是否可清除 | _boolean_ | `false` | | `resize` | 文本域是否可以拖动调整尺寸 | _boolean_ | `false` | | `validate-trigger` | 触发验证的时机, 可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput` | _ValidateTriggers[]_ | `['onInput', 'onClear']` | -| `rules` | 验证规则,返回`true`表示验证通过,其余的值则转换为文本作为用户提示 | _Array<(v: string \| number) => any>_ | `-` | +| `rules` | 验证规则,返回`true`表示验证通过,其余的值则转换为文本作为用户提示 | _Array<(v: string) => any>_ | `-` | ### 方法 @@ -136,7 +136,7 @@ createApp().use(Icon) | `blur` | 失焦 | `-` | `-` | | `validate` | 触发校验 | `-` | `valid: Promise` | | `resetValidation` | 清空校验信息 | `-` | `-` | -| `reset` | 清空绑定的值(字符类型设置为`''`,数字类型设置为`0`)和校验信息 | `-` | `-` | +| `reset` | 清空绑定的值和校验信息 | `-` | `-` | ### 事件 @@ -145,9 +145,9 @@ createApp().use(Icon) | `focus` | 聚焦时触发 | `event: Event` | | `blur` | 失焦时触发 | `event: Event` | | `click` | 点击时触发 | `event: Event` | -| `clear` | 清除时触发 | `value: string \| number` | -| `input` | 输入时触发 | `value: string \| number`
`event: Event` | -| `change` | 更新时触发 | `value: string \| number`
`event: Event` | +| `clear` | 清除时触发 | `value: string` | +| `input` | 输入时触发 | `value: string`, `event: Event` | +| `change` | 更新时触发 | `value: string`, `event: Event` | ### 插槽 diff --git a/packages/varlet-ui/src/input/props.ts b/packages/varlet-ui/src/input/props.ts index 768bfa969b9..fd6462f5aa6 100644 --- a/packages/varlet-ui/src/input/props.ts +++ b/packages/varlet-ui/src/input/props.ts @@ -1,17 +1,17 @@ import type { PropType } from 'vue' export function typeValidator(type: string) { - return ['text', 'password'].includes(type) + return ['text', 'password', 'number'].includes(type) } export type ValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onInput' export const props = { modelValue: { - type: [String, Number], + type: String, }, type: { - type: String as PropType<'text' | 'password'>, + type: String as PropType<'text' | 'password' | 'number'>, default: 'text', validator: typeValidator, }, @@ -67,7 +67,7 @@ export const props = { default: () => ['onInput', 'onClear'], }, rules: { - type: Array as PropType any>>, + type: Array as PropType any>>, }, onFocus: { type: Function as PropType<(e: FocusEvent) => void>, @@ -79,15 +79,15 @@ export const props = { type: Function as PropType<(e: Event) => void>, }, onClear: { - type: Function as PropType<(value: string | number) => void>, + type: Function as PropType<(value: string) => void>, }, onInput: { - type: Function as PropType<(value: string | number, e: Event) => void>, + type: Function as PropType<(value: string, e: Event) => void>, }, onChange: { - type: Function as PropType<(value: string | number, e: Event) => void>, + type: Function as PropType<(value: string, e: Event) => void>, }, 'onUpdate:modelValue': { - type: Function as PropType<(value: string | number) => void>, + type: Function as PropType<(value: string) => void>, }, } diff --git a/packages/varlet-ui/types/input.d.ts b/packages/varlet-ui/types/input.d.ts index d6eb6f66056..abee21318d5 100644 --- a/packages/varlet-ui/types/input.d.ts +++ b/packages/varlet-ui/types/input.d.ts @@ -3,8 +3,8 @@ import { VarComponent } from './varComponent' export type InputValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onInput' export interface InputProps { - modelValue?: string | number - type?: 'text' | 'password' + modelValue?: string + type?: 'text' | 'password' | 'number' textarea?: boolean rows?: string | number placeholder?: string @@ -18,14 +18,14 @@ export interface InputProps { clearable?: boolean resize?: boolean validateTrigger?: InputValidateTriggers[] - rules?: Array<(v: string | number) => any> + rules?: Array<(v: string) => any> onFocus?: (e: Event) => void onBlur?: (e: Event) => void onClick?: (e: Event) => void - onClear?: (value: string | number) => void - onInput?: (value: string | number, e: Event) => void - onChange?: (value: string | number, e: Event) => void - 'onUpdate:modelValue'?: (value: string | number) => void + onClear?: (value: string) => void + onInput?: (value: string, e: Event) => void + onChange?: (value: string, e: Event) => void + 'onUpdate:modelValue'?: (value: string) => void } export class Input extends VarComponent {