feat(input-number): add v-model support

src/components/input-number/index.ts

@@ -81,18 +81,17 @@ const AtInputNumber = defineComponent({
     disabled: Boolean,
     disabledInput: Boolean,
     // 事件
-    onChange: {
-      type: Function as PropType<AtInputNumberProps['onChange']>,
-      default: () => () => { },
-      required: true
-    },
+    onChange: Function as PropType<AtInputNumberProps['onChange']>,
     onBlur: Function as PropType<AtInputNumberProps['onBlur']>,
     onErrorInput: Function as PropType<AtInputNumberProps['onErrorInput']>
   },
 
-  setup(props: AtInputNumberProps, { attrs }) {
+  setup(props: AtInputNumberProps, { attrs, emit }) {
 
-    const inputValue = computed(() => Number(handleValue(props.value)))
+    const inputValue = computed({
+      get: () => Number(handleValue(props.value)),
+      set: (value) => emit('update:value', value)
+    })
 
     const inputStyle = computed(() => ({
       width: props.width ? `${pxTransform(props.width)}` : ''
@@ -138,7 +137,12 @@ const AtInputNumber = defineComponent({
       const deltaValue = clickType === 'minus' ? -props.step! : props.step!
       let newValue = addNum(Number(props.value), deltaValue)
       newValue = Number(handleValue(newValue))
-      props.onChange(newValue, e)
+
+      if (attrs['onUpdate:value']) {
+        inputValue.value = newValue
+      } else {
+        props.onChange?.(newValue, e)
+      }
     }
 
     function handleValue(value: string | number): string {
@@ -171,17 +175,21 @@ const AtInputNumber = defineComponent({
       return resultValue
     }
 
-    function handleInput(e: CommonEvent & ExtendEvent): string {
-      const { value } = e.target
-      if (props.disabled) return ''
+    function handleInput(e: CommonEvent & ExtendEvent) {
+      if (props.disabled) return
 
+      const { value } = e.target
       const newValue = handleValue(value)
-      props.onChange(Number(newValue), e)
-      return newValue
+
+      if (attrs['onUpdate:value']) {
+        inputValue.value = Number(newValue)
+      } else {
+        props.onChange?.(Number(newValue), e)
+      }
     }
 
     function handleBlur(e: ITouchEvent) {
-      props.onBlur && props.onBlur(e)
+      props.onBlur?.(e)
     }
 
     function handleError(errorValue: InputError) {

src/pages/form/input-number/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <page header-title="Input Number 数字输入框">
+    <panel
+      title="基础用法"
+      class="panel__content"
+    >
+      <example-item>
+        <view class="example-item__desc">通过 onChange 事件更新 value 值</view>
+        <view class="example-item__desc">min=0, max=10, step=1</view>
+        <at-input-number
+          :min="0"
+          :max="10"
+          :step="1"
+          :value="number1"
+          @change="handleNumberChange('number1', $event)"
+        />
+      </example-item>
+    </panel>
+
+    <panel
+      title="小数"
+      class="panel__content"
+    >
+      <example-item>
+        <view class="example-item__desc">通过 v-model:value 更新 value 值</view>
+        <view class="example-item__desc">min = 0, max = 10, step = 0.1</view>
+        <at-input-number
+          type="digit"
+          :min="0"
+          :max="10"
+          :step="0.1"
+          v-model:value="number2"
+        />
+      </example-item>
+    </panel>
+
+    <panel
+      title="禁用状态"
+      class="panel__content"
+    >
+      <example-item>
+        <at-input-number
+          disabled
+          :min="0"
+          :max="10"
+          :step="1"
+          v-model:value="number3"
+        />
+      </example-item>
+    </panel>
+
+    <panel
+      title="禁用输入状态"
+      class="panel__content"
+    >
+      <example-item>
+        <at-input-number
+          disabled-input
+          :min="0"
+          :max="10"
+          :step="1"
+          v-model:value="number4"
+        />
+      </example-item>
+    </panel>
+
+    <panel
+      title="自定义宽度"
+      class="panel__content"
+    >
+      <example-item>
+        <at-input-number
+          :width="200"
+          :min="0"
+          :max="10"
+          :step="1"
+          v-model:value="number5"
+        />
+      </example-item>
+    </panel>
+
+    <panel
+      title="大尺寸"
+      class="panel__content"
+    >
+      <example-item>
+        <at-input-number
+          size="large"
+          :min="0"
+          :max="10"
+          :step="1"
+          v-model:value="number6"
+        />
+      </example-item>
+    </panel>
+
+  </page>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from 'vue'
+import { AtInputNumber } from '../../../index'
+import { Page, Panel, ExampleItem } from '../../components/demo-page'
+import './index.scss'
+
+interface IndexState {
+  [key: string]: number
+}
+
+export default defineComponent({
+  name: "InputNumberDemo",
+
+  components: {
+    AtInputNumber,
+    Page,
+    Panel,
+    ExampleItem
+  },
+
+  setup() {
+
+    const state = reactive<IndexState>({
+      number1: 1,
+      number2: 1,
+      number3: 1,
+      number4: 1,
+      number5: 1,
+      number6: 1
+    })
+
+
+    function handleNumberChange(
+      stateName: string,
+      value: number,
+    ): void {
+      state[stateName] = value
+    }
+
+    return {
+      ...toRefs(state),
+      handleNumberChange
+    }
+
+  }
+})
+
+</script>

types/input-number.d.ts

@@ -17,7 +17,7 @@ export interface AtInputNumberProps extends AtComponent {
   /**
    * 输入框当前值
    * @type {number | string}
-   * @description 必填，输入框当前值，开发者需要通过 onChange 事件来更新 value 值
+   * @description 必填，输入框当前值，支持 v-model, 开发者可通过 v-model:value 或 onChange 事件来更新 value 值
    */
   value: number | string
 
@@ -67,9 +67,9 @@ export interface AtInputNumberProps extends AtComponent {
   /**
    * 输入框值改变时触发的事件
    * @param {number} value 输入框当前值
-   * @description 开发者需要通过 onChange 事件来更新 value 值变化，onChange 函数必填
+   * @description 开发者可通过 onChange 事件或 v-model:value 来更新 value 值变化。不使用 v-model 时，onChange 函数必填
    */
-  onChange: (value: number, e: CommonEvent) => void
+  onChange?: (value: number, e: CommonEvent) => void
   /**
    * 输入框值失去焦点时触发的事件
    */