feat(inputnumber): 增加自定义左右操作符图标功能 #1562 (#1567)

* feat(inputnumber): 增加自定义左右操作符图标功能

* feat(inputnumber): 增加内部 icon 的透传属性

* Revert "feat(inputnumber): 增加内部 icon 的透传属性"

This reverts commit d4d8a91e0065e68b97e87f12ea59b037af6f41af.

* feat(inputnumber): 增加内部 icon 的透传属性

src/packages/__VUE/icon/demo.vue

@@ -80,14 +80,15 @@ export default createDemo({
   setup() {
     initTranslate();
     const copyTag = (name: string) => {
-      const text = `<nut-icon name="${name}"></nut-icon>`;
+      const text = `<nut-icon name="${name}"></nut-icon>`;
+      const displayText = `&lt;nut-icon name="${name}"&gt;&lt;/nut-icon&gt;`;
       const input = document.createElement('input');
       document.body.appendChild(input);
       input.setAttribute('value', text);
       input.select();
       if (document.execCommand('copy')) {
         document.execCommand('copy');
-        Toast.text(`${translate('copyToast')}: <br/>${text}`);
+        Toast.text(`${translate('copyToast')}: <br/>${displayText}`);
       }
       document.body.removeChild(input);
     };

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

@@ -163,3 +163,19 @@ test('should update input value when inputValue overlimit', async () => {
 
   expect((wrapper.emitted('update:modelValue')![0] as any[])[0]).toEqual('100');
 });
+
+test('should render icon when iconLeft and iconRight props setted', async () => {
+  const wrapper = mount(InputNumber, {
+    props: {
+      iconLeft: 'left',
+      iconRight: 'right',
+      fontClassName: 'n-nutui-iconfont',
+      classPrefix: 'n-nut-icon'
+    }
+  });
+
+  const iconList = wrapper.findAll('.nut-icon');
+  expect(iconList.length).toBe(2);
+  expect(iconList[0].html()).toContain('n-nut-icon-left');
+  expect(iconList[1].html()).toContain('n-nut-icon-right');
+});

src/packages/__VUE/inputnumber/demo.vue

@@ -24,7 +24,7 @@
     <nut-cell>
       <nut-inputnumber v-model="state.val6" step="0.1" decimal-places="1" readonly />
     </nut-cell>
-    <h2>{{ translate('asyc') }}</h2>
+    <h2>{{ translate('async') }}</h2>
     <nut-cell>
       <nut-inputnumber :model-value="state.val8" @change="onChange" />
     </nut-cell>
@@ -32,6 +32,10 @@
     <nut-cell>
       <nut-inputnumber v-model="state.val7" button-size="30" input-width="50" />
     </nut-cell>
+    <h2>{{ translate('icon') }}</h2>
+    <nut-cell>
+      <nut-inputnumber icon-left="left" icon-right="right" v-model="state.val9" />
+    </nut-cell>
   </div>
 </template>
 
@@ -49,8 +53,9 @@ const initTranslate = () =>
       disable: '禁用操作',
       readonly: '只读禁用输入框',
       decimal: '支持小数',
-      asyn: '支持异步修改',
+      async: '支持异步修改',
       size: '自定义按钮大小',
+      icon: '自定义图标',
       content1: '异步演示 2 秒后更改',
       content2: '超出限制事件触发'
     },
@@ -61,8 +66,9 @@ const initTranslate = () =>
       disable: 'Disable operation',
       readonly: 'Read only disable input box',
       decimal: 'Support decimal',
-      asyc: 'Support asynchronous modification',
+      async: 'Support asynchronous modification',
       size: 'Custom button size',
+      icon: 'Custom icon name',
       content1: 'Asynchronous presentation changes in 2 seconds',
       content2: 'Trigger of limit exceeding event'
     }
@@ -82,6 +88,7 @@ export default createDemo({
       val6: 5.5,
       val7: 1,
       val8: 1,
+      val9: 1,
       step: 1.1
     });
 

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

@@ -216,6 +216,27 @@ Asynchronous modification through `change` event and `model-value`
 ```
 
 :::
+### Custsom icon name 
+
+:::demo
+
+```html
+<template>
+  <nut-inputnumber icon-left="left" icon-right="right" v-model="value" />
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const value = ref(1);
+      return { value };
+    },
+  };
+</script>
+```
+
+:::
 
 ## API
 
@@ -232,6 +253,10 @@ 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`  |
 
 ### Events
 

src/packages/__VUE/inputnumber/doc.md

@@ -216,6 +216,27 @@ app.use(InputNumber).use(Icon);
 ```
 
 :::
+### 自定义按钮图标
+
+:::demo
+
+```html
+<template>
+  <nut-inputnumber icon-left="left" icon-right="right" v-model="value" />
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const value = ref(1);
+      return { value };
+    },
+  };
+</script>
+```
+
+:::
 
 ## API
 
@@ -232,6 +253,10 @@ app.use(InputNumber).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`  |
 
 ### Events
 

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

@@ -1,10 +1,11 @@
 <template>
   <view :class="classes" :style="{ height: pxCheck(buttonSize) }">
     <nut-icon
-      name="minus"
+      :name="iconLeft"
       class="nut-inputnumber__icon"
       :class="{ 'nut-inputnumber__icon--disabled': !reduceAllow() }"
       :size="buttonSize"
+      v-bind="$attrs"
       @click="reduce"
     >
     </nut-icon>
@@ -25,10 +26,11 @@
       @focus="focus"
     />
     <nut-icon
-      name="plus"
+      :name="iconRight"
       class="nut-inputnumber__icon"
       :class="{ 'nut-inputnumber__icon--disabled': !addAllow() }"
       :size="buttonSize"
+      v-bind="$attrs"
       @click="add"
     >
     </nut-icon>
@@ -76,6 +78,14 @@ 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,10 +1,11 @@
 <template>
   <view :class="classes" :style="{ height: pxCheck(buttonSize) }">
     <nut-icon
-      name="minus"
+      :name="iconLeft"
       class="nut-inputnumber__icon"
       :class="{ 'nut-inputnumber__icon--disabled': !reduceAllow() }"
       :size="buttonSize"
+      v-bind="$attrs"
       @click="reduce"
     >
     </nut-icon>
@@ -21,10 +22,11 @@
       @focus="focus"
     />
     <nut-icon
-      name="plus"
+      :name="iconRight"
       class="nut-inputnumber__icon"
       :class="{ 'nut-inputnumber__icon--disabled': !addAllow() }"
       :size="buttonSize"
+      v-bind="$attrs"
       @click="add"
     >
     </nut-icon>
@@ -72,6 +74,14 @@ 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'],