feat(input-number): 支持透传属性至 input 元素 (#3008)

src/packages/__VUE/inputnumber/__tests__/index.spec.ts → src/packages/__VUE/inputnumber/__tests__/index.spec.tsx

@@ -4,12 +4,9 @@ import { h, nextTick } from 'vue'
 import { Left, Right } from '@nutui/icons-vue'
 
 test('InputNumber: should render modelValue', () => {
-  const wrapper = mount(InputNumber, {
-    props: {
-      modelValue: 12
-    }
+  const wrapper = mount(() => {
+    return <InputNumber modelValue={12} />
   })
-
   const input = wrapper.find('input').element as HTMLInputElement
   expect(input.value).toBe('12')
 })
@@ -189,3 +186,15 @@ test('InputNumber: should change modelValue after props.min was changed', async
   expect(wrapper.emitted()['update:modelValue']).toHaveLength(1)
   expect(wrapper.emitted()['update:modelValue'][0]).toStrictEqual(['7', {}])
 })
+
+test('InputNumber: v-bind="$attrs"', async () => {
+  const testClass = 'test-attr-class'
+  const customAttr = 'custom-attr'
+  const wrapper = mount(() => {
+    return <InputNumber modelValue={12} class={testClass} custom-attr={customAttr} />
+  })
+
+  const input = wrapper.find('input').element as HTMLInputElement
+  expect(input.getAttribute('class')).includes(testClass)
+  expect(input.getAttribute(customAttr)).includes(customAttr)
+})

src/packages/__VUE/inputnumber/doc.en-US.md

@@ -74,6 +74,10 @@ Set step size `step` 0.1 `decimal places` keep 1 decimal place
 | disabled | Disable all features | boolean | `false` |
 | readonly | Read only status disables input box operation behavior | boolean | `false` |
 
+### Attrs version
+
+The attributes on `InputNumber` will be inherited by `input` element.
+
 ### Slots
 
 | Name | Description |

src/packages/__VUE/inputnumber/doc.md

@@ -74,6 +74,10 @@ app.use(InputNumber)
 | disabled | 禁用所有功能 | boolean | `false` |
 | readonly | 只读状态禁用输入框操作行为 | boolean | `false` |
 
+### Attrs version
+
+支持透传属性至组件内部的 input 元素。
+
 ### Slots
 
 | 名称 | 说明 |

src/packages/__VUE/inputnumber/doc.taro.md

@@ -74,6 +74,10 @@ app.use(InputNumber)
 | disabled | 禁用所有功能 | boolean | `false` |
 | readonly | 只读状态禁用输入框操作行为 | boolean | `false` |
 
+### Attrs version
+
+支持透传属性至组件内部的 input 元素。
+
 ### Slots
 
 | 名称 | 说明 |

src/packages/__VUE/inputnumber/input-number.taro.vue

@@ -16,6 +16,7 @@
       v-else
       class="nut-input-number__text--input"
       type="number"
+      v-bind="$attrs"
       :min="min"
       :max="max"
       :style="{ width: pxCheck(inputWidth), height: pxCheck(buttonSize) }"
@@ -44,7 +45,8 @@ import { Minus, Plus } from '@nutui/icons-vue-taro'
 import { useFormDisabled } from '../form/common'
 
 defineOptions({
-  name: 'NutInputNumber'
+  name: 'NutInputNumber',
+  inheritAttrs: false
 })
 
 export type InputNumberProps = Partial<{

src/packages/__VUE/inputnumber/input-number.vue

@@ -11,6 +11,7 @@
     </view>
     <input
       type="number"
+      v-bind="$attrs"
       :min="min"
       :max="max"
       :style="{ width: pxCheck(inputWidth), height: pxCheck(buttonSize) }"
@@ -39,7 +40,8 @@ import { Minus, Plus } from '@nutui/icons-vue'
 import { useFormDisabled } from '../form/common'
 
 defineOptions({
-  name: 'NutInputNumber'
+  name: 'NutInputNumber',
+  inheritAttrs: false
 })
 
 export type InputNumberProps = Partial<{