feat(components): [input-number] add new prop readonly

docs/en-US/component/input-number.md

@@ -90,6 +90,7 @@ input-number/controlled
 | step-strictly                 | whether input value can only be multiple of step | boolean                | —               | false       |
 | precision                     | precision of input value                         | number                 | —               | —           |
 | size                          | size of the component                            | string                 | large/small     | default     |
+| readonly                      | same as `readonly` in native input               | boolean                | —               | false       |
 | disabled                      | whether the component is disabled                | boolean                | —               | false       |
 | controls                      | whether to enable the control buttons            | boolean                | —               | true        |
 | controls-position             | position of the control buttons                  | string                 | right           | -           |

packages/components/input-number/__tests__/input-number.test.tsx

@@ -1,6 +1,6 @@
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, it, test } from 'vitest'
+import { describe, expect, it, test, vi } from 'vitest'
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import { ElFormItem } from '@element-plus/components/form'
 import InputNumber from '../src/input-number.vue'
@@ -157,6 +157,28 @@ describe('InputNumber.vue', () => {
     )
   })
 
+  test('readonly', async () => {
+    const num = ref(0)
+    const handleFocus = vi.fn()
+    const wrapper = mount(() => (
+      <InputNumber readonly v-model={num.value} onFocus={handleFocus} />
+    ))
+
+    wrapper.find('.el-input__inner').trigger('focus')
+    await nextTick()
+    expect(handleFocus).toHaveBeenCalledTimes(1)
+
+    wrapper.find('.el-input-number__decrease').trigger('mousedown')
+    document.dispatchEvent(mouseup)
+    await nextTick()
+    expect(wrapper.find('input').element.value).toEqual('0')
+
+    wrapper.find('.el-input-number__increase').trigger('mousedown')
+    document.dispatchEvent(mouseup)
+    await nextTick()
+    expect(wrapper.find('input').element.value).toEqual('0')
+  })
+
   test('disabled', async () => {
     const num = ref(0)
     const wrapper = mount(() => (

packages/components/input-number/src/input-number.ts

@@ -28,6 +28,7 @@ export const inputNumberProps = buildProps({
     default: Number.NEGATIVE_INFINITY,
   },
   modelValue: Number,
+  readonly: Boolean,
   disabled: Boolean,
   size: useSizeProp,
   controls: {

packages/components/input-number/src/input-number.vue

@@ -42,6 +42,7 @@
       :step="step"
       :model-value="displayValue"
       :placeholder="placeholder"
+      :readonly="readonly"
       :disabled="inputNumberDisabled"
       :size="inputNumberSize"
       :max="max"
@@ -174,13 +175,13 @@ const ensurePrecision = (val: number, coefficient: 1 | -1 = 1) => {
   return toPrecision(val + props.step * coefficient)
 }
 const increase = () => {
-  if (inputNumberDisabled.value || maxDisabled.value) return
+  if (props.readonly || inputNumberDisabled.value || maxDisabled.value) return
   const value = props.modelValue || 0
   const newVal = ensurePrecision(value)
   setCurrentValue(newVal)
 }
 const decrease = () => {
-  if (inputNumberDisabled.value || minDisabled.value) return
+  if (props.readonly || inputNumberDisabled.value || minDisabled.value) return
   const value = props.modelValue || 0
   const newVal = ensurePrecision(value, -1)
   setCurrentValue(newVal)