feat: ✨ 修复 InputNumber 在设置为 allow-null 时被赋值为空时未触发更新的问题并支持异步更新 (#812)

Author: Moonofweisheng

docs/component/input-number.md

@@ -96,6 +96,34 @@ function handleChange1({ value }) {
 }
 ```
 
+## 异步变更
+通过 `before-change` 可以在输入值变化前进行校验和拦截。
+
+```html
+<wd-input-number v-model="value" :before-change="beforeChange" />
+```
+
+```typescript
+import { ref } from 'vue'
+import { useToast } from '@/uni_modules/wot-design-uni'
+import type { InputNumberBeforeChange } from '@/uni_modules/wot-design-uni/components/wd-input-number/types'
+const { loading, close } = useToast()
+
+const value = ref<number>(1)
+ 
+const beforeChange: InputNumberBeforeChange = (value) => {
+  loading({ msg: `正在更新到${value}...` })
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      close()
+      resolve(true)
+    }, 500)
+  })
+}
+```
+
+ 
+
 ## Attributes
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
@@ -109,12 +137,13 @@ function handleChange1({ value }) {
 | disabled | 禁用 | boolean | - | false | - |
 | without-input | 不显示输入框 | boolean | - | false | - |
 | input-width | 输入框宽度 | string | - | 36px | - |
-| allow-null | 允许空值 | boolean | - | false | - |
+| allow-null | 是否允许输入的值为空，设置为 `true` 后允许传入空字符串 | boolean | - | false | - |
 | placeholder | 占位文本 | string | - | - | - |
 | disable-input | 禁用输入框 | boolean | - | false | 0.2.14 |
 | disable-plus | 禁用增加按钮 | boolean | - | false | 0.2.14 |
 | disable-minus | 禁用减少按钮 | boolean | - | false | 0.2.14 |
 | adjustPosition | 原生属性，键盘弹起时，是否自动上推页面 | boolean | - | true | 1.3.11 |
+| before-change | 输入框值改变前触发，返回 false 会阻止输入框值改变，支持返回 `Promise` | `(value: number \| string) => boolean \| Promise<boolean>` | - | - | $LOWEST_VERSION$ |
 
 
 ## Events

src/pages/inputNumber/Index.vue

@@ -33,10 +33,16 @@
     <demo-block title="允许空值，并设置 placeholder">
       <wd-input-number v-model="value9" allow-null placeholder="不限" input-width="70px" @change="handleChange9" />
     </demo-block>
+    <demo-block title="异步变更">
+      <wd-input-number v-model="value11" :before-change="beforeChange" />
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup>
+import { useToast } from '@/uni_modules/wot-design-uni'
+import type { InputNumberBeforeChange } from '@/uni_modules/wot-design-uni/components/wd-input-number/types'
 import { ref } from 'vue'
+const { loading, close } = useToast()
 
 const value1 = ref<number>(1)
 const value2 = ref<number>(1)
@@ -48,6 +54,7 @@ const value7 = ref<number>(1)
 const value8 = ref<number>(2)
 const value9 = ref<string>('')
 const value10 = ref<number>(1)
+const value11 = ref<number>(1)
 
 function handleChange1({ value }: any) {
   console.log(value)
@@ -76,6 +83,16 @@ function handleChange8({ value }: any) {
 function handleChange9({ value }: any) {
   console.log(value)
 }
+
+const beforeChange: InputNumberBeforeChange = (value) => {
+  loading({ msg: `正在更新到${value}...` })
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      close()
+      resolve(true)
+    }, 500)
+  })
+}
 </script>
 <style lang="scss" scoped>
 .flex {

src/uni_modules/wot-design-uni/components/common/interceptor.ts

@@ -0,0 +1,43 @@
+import { isPromise } from './util'
+
+function noop() {}
+
+export type Interceptor = (...args: any[]) => Promise<boolean> | boolean | undefined | void
+
+export function callInterceptor(
+  interceptor: Interceptor | undefined,
+  {
+    args = [],
+    done,
+    canceled,
+    error
+  }: {
+    args?: unknown[]
+    done: () => void
+    canceled?: () => void
+    error?: () => void
+  }
+) {
+  if (interceptor) {
+    // eslint-disable-next-line prefer-spread
+    const returnVal = interceptor.apply(null, args)
+
+    if (isPromise(returnVal)) {
+      returnVal
+        .then((value) => {
+          if (value) {
+            done()
+          } else if (canceled) {
+            canceled()
+          }
+        })
+        .catch(error || noop)
+    } else if (returnVal) {
+      done()
+    } else if (canceled) {
+      canceled()
+    }
+  } else {
+    done()
+  }
+}

src/uni_modules/wot-design-uni/components/wd-input-number/types.ts

@@ -1,14 +1,17 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 20:40:34
- * @LastEditTime: 2024-09-18 09:49:12
+ * @LastEditTime: 2024-12-31 00:33:21
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-input-number\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-input-number/types.ts
  * 记得注释
  */
+import type { PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeRequiredProp, makeStringProp, numericProp } from '../common/props'
 
+export type InputNumberBeforeChange = (value: number | string) => boolean | Promise<boolean>
+
 export const inputNumberProps = {
   ...baseProps,
   /**
@@ -70,5 +73,9 @@ export const inputNumberProps = {
   /**
    * 原生属性，键盘弹起时，是否自动上推页面
    */
-  adjustPosition: makeBooleanProp(true)
+  adjustPosition: makeBooleanProp(true),
+  /**
+   * 输入值变化前的回调函数，返回 `false` 可阻止输入，支持返回 `Promise`
+   */
+  beforeChange: Function as PropType<InputNumberBeforeChange>
 }