diff --git a/docs/en-US/component/input-number.md b/docs/en-US/component/input-number.md index 94317ce6c7..210ca8de01 100644 --- a/docs/en-US/component/input-number.md +++ b/docs/en-US/component/input-number.md @@ -120,6 +120,7 @@ input-number/with-prefix-suffix | validate-event | whether to trigger form validation | ^[boolean] | true | | label ^(a11y) ^(deprecated) | same as `aria-label` in native input | ^[string] | — | | inputmode ^(2.10.3) | same as `inputmode` in native input | ^[string] | — | +| align ^(2.10.5) | alignment for the inner input text | ^[enum]`'left' \| 'center' \| 'right'` | 'center' | ### Slots diff --git a/packages/components/input-number/__tests__/input-number.test.tsx b/packages/components/input-number/__tests__/input-number.test.tsx index aaeb404312..917cb492d9 100755 --- a/packages/components/input-number/__tests__/input-number.test.tsx +++ b/packages/components/input-number/__tests__/input-number.test.tsx @@ -611,4 +611,25 @@ describe('InputNumber.vue', () => { expect(wrapper.find('input').element.value).toBe(num.value.toString()) wrapper.unmount() }) + + describe('align prop class mapping', () => { + it.each([ + ['left', 'is-left'], + ['center', 'is-center'], + ['right', 'is-right'], + ] as Array<['left' | 'center' | 'right', string]>)( + 'align=%s should add class %s', + async (align, expectedClass) => { + const num = ref(0) + const wrapper = mount(() => ( + + )) + + await nextTick() + + const root = wrapper.find('.el-input-number') + expect(root.classes()).toContain(expectedClass) + } + ) + }) }) diff --git a/packages/components/input-number/src/input-number.ts b/packages/components/input-number/src/input-number.ts index a4f4af7ef1..d3f3777ea2 100644 --- a/packages/components/input-number/src/input-number.ts +++ b/packages/components/input-number/src/input-number.ts @@ -120,6 +120,13 @@ export const inputNumberProps = buildProps({ type: definePropType(String), default: undefined, }, + /** + * @description alignment for the inner input text + */ + align: { + type: definePropType<'left' | 'right' | 'center'>(String), + default: 'center', + }, } as const) export type InputNumberProps = ExtractPropTypes export type InputNumberPropsPublic = __ExtractPublicPropTypes< diff --git a/packages/components/input-number/src/input-number.vue b/packages/components/input-number/src/input-number.vue index 173509ff94..b9e0429280 100755 --- a/packages/components/input-number/src/input-number.vue +++ b/packages/components/input-number/src/input-number.vue @@ -6,6 +6,7 @@ ns.is('disabled', inputNumberDisabled), ns.is('without-controls', !controls), ns.is('controls-right', controlsAtRight), + ns.is(align, !!align), ]" @dragstart.prevent > diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss index e340989bed..2069d9f007 100644 --- a/packages/theme-chalk/src/input-number.scss +++ b/packages/theme-chalk/src/input-number.scss @@ -29,7 +29,13 @@ } } } - + @each $align in (left, right, center) { + @include when($align) { + .#{$namespace}-input__inner { + text-align: $align; + } + } + } @include e((increase, decrease)) { display: flex; justify-content: center;