chore(inputnumber): use icon-vue component

src/packages/__VUE/inputnumber/demo.vue

@@ -34,7 +34,14 @@
     </nut-cell>
     <h2>{{ translate('icon') }}</h2>
     <nut-cell>
-      <nut-input-number icon-left="left" icon-right="right" v-model="state.val9" />
+      <nut-input-number v-model="state.val9">
+        <template #leftIcon>
+          <Left />
+        </template>
+        <template #rightIcon>
+          <Right />
+        </template>
+      </nut-input-number>
     </nut-cell>
   </div>
 </template>
@@ -42,6 +49,7 @@
 <script lang="ts">
 import { reactive, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { Left, Right } from '@nutui/icons-vue';
 const { createDemo, translate } = createComponent('input-number');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -74,6 +82,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { Left, Right },
   props: {},
   setup() {
     initTranslate();

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

@@ -9,14 +9,12 @@ Control the number increase or decrease by clicking the button.
 ``` javascript
 import { createApp } from 'vue';
 // vue
-import { InputNumber,Icon } from '@nutui/nutui';
+import { InputNumber } from '@nutui/nutui';
 // taro
-import { InputNumber,Icon } from '@nutui/nutui-taro';
+import { InputNumber } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(InputNumber);
-app.use(Icon);
-
 ```
 
 
@@ -223,7 +221,14 @@ Asynchronous modification through `change` event and `model-value`
 
 ```html
 <template>
-  <nut-input-number icon-left="left" icon-right="right" v-model="value" />
+  <nut-input-number v-model="value">
+    <template #leftIcon>
+      <Left />
+    </template>
+    <template #rightIcon>
+      <Right />
+    </template>
+  </nut-input-number>
 </template>
 <script lang="ts">
   import { ref } from 'vue';
@@ -254,10 +259,13 @@ Asynchronous modification through `change` event and `model-value`
 | decimal-places | Set reserved decimal places           | String、Number | `0`        |
 | disabled       | Disable all features               | Boolean        | false      |
 | readonly       | Read only status disables input box operation behavior | Boolean        | false      |
-| icon-left`v3.2.2`  | Left icon name             | String         | `minus`     |
-| icon-right`v3.2.2` | Right icon name             | String         | `plus`      |
-| font-class-name `v3.2.2` | Custom icon font base class name | String   | `nutui-iconfont` |
-| class-prefix `v3.2.2` | Custom icon class name prefix for using custom icons | String   | `nut-icon`  |
+
+### Slots
+
+| Name | Description |
+|-|-|
+| leftIcon | Custom left icon |
+| rightIcon | Custom right icon |
 
 ### Events
 

src/packages/__VUE/inputnumber/doc.md

@@ -9,14 +9,12 @@
 ``` javascript
 import { createApp } from 'vue';
 // vue
-import { InputNumber,Icon } from '@nutui/nutui';
+import { InputNumber } from '@nutui/nutui';
 // taro
-import { InputNumber,Icon } from '@nutui/nutui-taro';
+import { InputNumber } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(InputNumber);
-app.use(Icon);
-
 ```
 
 
@@ -223,7 +221,14 @@ app.use(Icon);
 
 ```html
 <template>
-  <nut-input-number icon-left="left" icon-right="right" v-model="value" />
+  <nut-input-number v-model="value">
+    <template #leftIcon>
+      <Left />
+    </template>
+    <template #rightIcon>
+      <Right />
+    </template>
+  </nut-input-number>
 </template>
 <script lang="ts">
   import { ref } from 'vue';
@@ -254,10 +259,13 @@ app.use(Icon);
 | decimal-places | 设置保留的小数位           | String、Number | `0`        |
 | disabled       | 禁用所有功能               | Boolean        | false      |
 | readonly       | 只读状态禁用输入框操作行为 | Boolean        | false      |
-| icon-left `v3.2.2`  | 左侧操作符图标名，同 Icon 组件 name 属性 | String  | `minus` |
-| icon-right `v3.2.2` | 右侧操作符图标名，同 Icon 组件 name 属性 | String  | `plus`  |
-| font-class-name `v3.2.2` | 自定义icon 字体基础类名 | String   | `nutui-iconfont` |
-| class-prefix `v3.2.2` | 自定义icon 类名前缀，用于使用自定义图标 | String   | `nut-icon`  |
+
+### Slots
+
+| 名称 | 说明 |
+|-|-|
+| leftIcon | 自定义左侧按钮 |
+| rightIcon | 自定义右侧按钮 |
 
 ### Events
 

src/packages/__VUE/inputnumber/index.scss

@@ -35,6 +35,8 @@
   }
 
   &__icon {
+    display: flex;
+    align-items: center;
     color: $inputnumber-icon-color;
     font-size: $inputnumber-icon-size;
     cursor: pointer;

src/packages/__VUE/inputnumber/index.taro.vue

@@ -1,21 +1,21 @@
 <template>
-  <view :class="classes" :style="{ height: pxCheck(buttonSize) }">
-    <nut-icon
-      :name="iconLeft"
+  <view :class="classes">
+    <view
       class="nut-input-number__icon"
       :class="{ 'nut-input-number__icon--disabled': !reduceAllow() }"
-      :size="buttonSize"
-      v-bind="$attrs"
       @click="reduce"
     >
-    </nut-icon>
+      <slot name="leftIcon">
+        <Minus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
+      </slot>
+    </view>
     <view v-if="readonly" class="nut-input-number__text--readonly">
       {{ modelValue }}
     </view>
     <input
       v-else
-      type="number"
       class="nut-input-number__text--input"
+      type="number"
       :min="min"
       :max="max"
       :style="{ width: pxCheck(inputWidth) }"
@@ -26,23 +26,21 @@
       @blur="blur"
       @focus="focus"
     />
-    <nut-icon
-      :name="iconRight"
-      class="nut-input-number__icon"
-      :class="{ 'nut-input-number__icon--disabled': !addAllow() }"
-      :size="buttonSize"
-      v-bind="$attrs"
-      @click="add"
-    >
-    </nut-icon>
+    <view class="nut-input-number__icon" :class="{ 'nut-input-number__icon--disabled': !addAllow() }" @click="add">
+      <slot name="rightIcon">
+        <Plus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
+      </slot>
+    </view>
   </view>
 </template>
 <script lang="ts">
 import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
+import { Minus, Plus } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('input-number');
 export default create({
+  components: { Minus, Plus },
   props: {
     modelValue: {
       type: [Number, String],
@@ -50,11 +48,11 @@ export default create({
     },
     inputWidth: {
       type: [Number, String],
-      default: ''
+      default: '40px'
     },
     buttonSize: {
       type: [Number, String],
-      default: ''
+      default: '20px'
     },
     min: {
       type: [Number, String],
@@ -79,14 +77,6 @@ export default create({
     readonly: {
       type: Boolean,
       default: false
-    },
-    iconLeft: {
-      type: String,
-      default: 'minus'
-    },
-    iconRight: {
-      type: String,
-      default: 'plus'
     }
   },
   emits: ['update:modelValue', 'change', 'blur', 'focus', 'reduce', 'add', 'overlimit'],

src/packages/__VUE/inputnumber/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <view :class="classes" :style="{ height: pxCheck(buttonSize) }">
-    <nut-icon
-      :name="iconLeft"
+  <view :class="classes">
+    <view
       class="nut-input-number__icon"
       :class="{ 'nut-input-number__icon--disabled': !reduceAllow() }"
-      :size="buttonSize"
-      v-bind="$attrs"
       @click="reduce"
     >
-    </nut-icon>
+      <slot name="leftIcon">
+        <Minus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
+      </slot>
+    </view>
     <input
       type="number"
       :min="min"
@@ -21,23 +21,21 @@
       @blur="blur"
       @focus="focus"
     />
-    <nut-icon
-      :name="iconRight"
-      class="nut-input-number__icon"
-      :class="{ 'nut-input-number__icon--disabled': !addAllow() }"
-      :size="buttonSize"
-      v-bind="$attrs"
-      @click="add"
-    >
-    </nut-icon>
+    <view class="nut-input-number__icon" :class="{ 'nut-input-number__icon--disabled': !addAllow() }" @click="add">
+      <slot name="rightIcon">
+        <Plus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
+      </slot>
+    </view>
   </view>
 </template>
 <script lang="ts">
 import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
+import { Minus, Plus } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('input-number');
 export default create({
+  components: { Minus, Plus },
   props: {
     modelValue: {
       type: [Number, String],
@@ -45,11 +43,11 @@ export default create({
     },
     inputWidth: {
       type: [Number, String],
-      default: ''
+      default: '40px'
     },
     buttonSize: {
       type: [Number, String],
-      default: ''
+      default: '20px'
     },
     min: {
       type: [Number, String],
@@ -74,14 +72,6 @@ export default create({
     readonly: {
       type: Boolean,
       default: false
-    },
-    iconLeft: {
-      type: String,
-      default: 'minus'
-    },
-    iconRight: {
-      type: String,
-      default: 'plus'
     }
   },
   emits: ['update:modelValue', 'change', 'blur', 'focus', 'reduce', 'add', 'overlimit'],