fix(inputnumber): 新增step-strictly属性 (#421)

xiaohe0601 · web-flow · commit c0a3c47099f1 · 2024-09-09T15:01:42.000+08:00
diff --git a/docs/components/dentry/inputnumber.md b/docs/components/dentry/inputnumber.md
@@ -6,7 +6,7 @@
 
 ### 基础用法
 
-初始化一个默认值
+使用 `v-model` 绑定变量即可，变量的初始值即为默认值
 
 ```html
 <template>
@@ -20,7 +20,7 @@ const value = ref(1);
 
 ### 步长设置
 
-设置步长 `step` 5
+设置 `step` 可以控制步长
 
 ```html
 <template>
@@ -30,7 +30,7 @@ const value = ref(1);
 
 ### 限制输入范围
 
-`min` 和 `max` 属性分别表示最小值和最大值
+通过 `min` / `max` 可以设置最小/最大值
 
 ```html
 <template>
@@ -40,27 +40,27 @@ const value = ref(1);
 
 ### 禁用状态
 
-`disabled` 禁用状态下无法点击按钮或修改输入框。
+`disabled` 可以同时禁用按钮的点击和输入框的输入行为
 
 ```html
 <template>
   <nut-input-number v-model="value" disabled></nut-input-number>
 </template>
 ```
 
-### 只读禁用输入框
+### 禁用输入框
 
-`readonly` 设置只读禁用输入框输入行为
+`readonly` 只禁用输入框的输入行为，按钮仍然可以点击
 
 ```html
 <template>
   <nut-input-number v-model="value" readonly></nut-input-number>
 </template>
 ```
 
-### 支持小数点
+### 支持小数
 
-设置步长 `step` 0.1，`decimal-places` 小数保留 1 位
+步长 `step` 设置为 `0.1`，并设置 `decimal-places` 使小数保留 `1` 位
 
 ```html
 <template>
@@ -70,7 +70,7 @@ const value = ref(1);
 
 ### 支持异步修改
 
-通过 `change` 事件和 `model-value` 进行异步修改
+通过 `model-value` 和 `change` 事件进行异步修改
 
 ```html
 <template>
@@ -116,17 +116,18 @@ function handleChange(value: number) {
 
 ### Props
 
-| 参数             | 说明            | 类型               | 默认值     |
-|----------------|---------------|------------------|---------|
-| v-model        | 初始值           | string \| number | `0`     |
-| input-width    | 输入框宽度         | string \| number | -       |
-| button-size    | 操作符+、-尺寸      | string \| number | -       |
-| min            | 最小值限制         | string \| number | `1`     |
-| max            | 最大值限制         | string \| number | `9999`  |
-| step           | 步长            | string \| number | `1`     |
-| decimal-places | 设置保留的小数位      | string \| number | `0`     |
-| disabled       | 禁用所有功能        | boolean          | `false` |
-| readonly       | 只读状态禁用输入框操作行为 | boolean          | `false` |
+| 参数                     | 说明              | 类型               | 默认值     |
+|------------------------|-----------------|------------------|---------|
+| v-model                | 初始值             | string \| number | `0`     |
+| min                    | 最小值限制           | string \| number | `1`     |
+| max                    | 最大值限制           | string \| number | `9999`  |
+| step                   | 步长              | string \| number | `1`     |
+| step-strictly `1.7.17` | 是否只能输入 step 的倍数 | boolean          | `false` |
+| decimal-places         | 设置保留的小数位        | string \| number | `0`     |
+| disabled               | 禁用所有功能          | boolean          | `false` |
+| readonly               | 只读状态禁用输入框操作行为   | boolean          | `false` |
+| input-width            | 输入框宽度           | string \| number | -       |
+| button-size            | 操作符+、-尺寸        | string \| number | -       |
 
 ### Attrs version
 
@@ -136,19 +137,19 @@ function handleChange(value: number) {
 
 | 名称        | 说明      |
 |-----------|---------|
-| leftIcon  | 自定义左侧按钮 |
-| rightIcon | 自定义右侧按钮 |
+| leftIcon  | 自定义减少按钮 |
+| rightIcon | 自定义增加按钮 |
 
 ### Events
 
-| 事件名       | 说明          | 回调参数                                            |
-|-----------|-------------|-------------------------------------------------|
-| change    | 值改变时触发      | (value: number, event: `BaseEvent`)             |
-| focus     | 输入框获得焦点时触发  | (event: `InputOnFocusEvent`)                    |
-| blur      | 输入框失去焦点时触发  | (event: `InputOnBlurEvent`)                     |
-| reduce    | 点击减少按钮时触发   | (event: `BaseEvent`)                            |
-| add       | 点击增加按钮时触发   | (event: `BaseEvent`)                            |
-| overlimit | 点击不可用的按钮时触发 | (event: `BaseEvent`, type: `'reduce' \| 'add'`) |
+| 事件名       | 说明          | 回调参数                                             |
+|-----------|-------------|--------------------------------------------------|
+| change    | 值改变时触发      | (value: number, event: `BaseEvent \| undefined`) |
+| focus     | 输入框获得焦点时触发  | (event: `InputOnFocusEvent`)                     |
+| blur      | 输入框失去焦点时触发  | (event: `InputOnBlurEvent`)                      |
+| reduce    | 点击减少按钮时触发   | (event: `BaseEvent`)                             |
+| add       | 点击增加按钮时触发   | (event: `BaseEvent`)                             |
+| overlimit | 点击不可用的按钮时触发 | (event: `BaseEvent`, type: `'reduce' \| 'add'`)  |
 
 ## 主题定制
 
diff --git a/example/src/pages/demo/dentry/inputnumber/index.vue b/example/src/pages/demo/dentry/inputnumber/index.vue
@@ -53,14 +53,14 @@ function handleChange(value: number) {
     </nut-cell>
 
     <h2 class="title">
-      禁用操作
+      禁用状态
     </h2>
     <nut-cell>
       <nut-input-number v-model="value4" disabled />
     </nut-cell>
 
     <h2 class="title">
-      只读禁用输入框
+      禁用输入框
     </h2>
     <nut-cell>
       <nut-input-number v-model="value5" readonly />
@@ -74,15 +74,14 @@ function handleChange(value: number) {
         v-model="value6"
         step="0.1"
         decimal-places="1"
-        readonly
       />
     </nut-cell>
 
     <h2 class="title">
       支持异步修改
     </h2>
     <nut-cell>
-      <nut-input-number :model-value="value7" @change="handleChange" />
+      <nut-input-number :model-value="value7" readonly @change="handleChange" />
     </nut-cell>
 
     <h2 class="title">
diff --git a/packages/nutui/components/inputnumber/inputnumber.ts b/packages/nutui/components/inputnumber/inputnumber.ts
@@ -9,14 +9,6 @@ export const inputnumberProps = {
    * @description 初始值
    */
   modelValue: makeNumericProp(0),
-  /**
-   * @description 输入框宽度
-   */
-  inputWidth: makeNumericProp(''),
-  /**
-   * @description 操作加减按钮的尺寸
-   */
-  buttonSize: makeNumericProp(''),
   /**
    * @description 最小值限制
    */
@@ -29,6 +21,10 @@ export const inputnumberProps = {
    * @description 步长
    */
   step: makeNumericProp(1),
+  /**
+   * @description 是否只能输入 step 的倍数
+   */
+  stepStrictly: Boolean,
   /**
    * @description 设置保留的小数位
    */
@@ -41,14 +37,22 @@ export const inputnumberProps = {
    * @description 只读状态禁用输入框操作行为
    */
   readonly: Boolean,
+  /**
+   * @description 输入框宽度
+   */
+  inputWidth: makeNumericProp(''),
+  /**
+   * @description 操作加减按钮的尺寸
+   */
+  buttonSize: makeNumericProp(''),
 }
 
 export type InputNumberProps = ExtractPropTypes<typeof inputnumberProps>
 
 /* eslint-disable unused-imports/no-unused-vars */
 export const inputnumberEmits = {
   [UPDATE_MODEL_EVENT]: (value: number) => true,
-  [CHANGE_EVENT]: (value: number, event: BaseEvent) => true,
+  [CHANGE_EVENT]: (value: number, event?: BaseEvent) => true,
   [FOCUS_EVENT]: (event: InputOnFocusEvent) => true,
   [BLUR_EVENT]: (event: InputOnBlurEvent) => true,
   reduce: (event: BaseEvent) => true,
diff --git a/packages/nutui/components/inputnumber/inputnumber.vue b/packages/nutui/components/inputnumber/inputnumber.vue
