ソースを参照

feat: inputnumber icon size

suzigang 2 年 前
コミット
e9f4d36108

+ 6 - 4
src/packages/__VUE/inputnumber/doc.en-US.md

@@ -242,8 +242,8 @@ Asynchronous modification through `change` event and `model-value`
 | Attribute      | Description                                            | Type             | Default |
 |----------------|--------------------------------------------------------|------------------|---------|
 | v-model        | Initial value                                          | string \| number | -       |
-| input-width    | Input box width                                        | string           | `40px`  |
-| button-size    | Operators +, - Dimensions                              | string           | `20px`  |
+| input-width    | Input box width                                        | string           | ``  |
+| button-size    | Operators +, - Dimensions                              | string           | ``  |
 | min            | Minimum limit                                          | string \| number | `1`     |
 | max            | Maximum limit                                          | string \| number | `9999`  |
 | step           | step                                                   | string \| number | `1`     |
@@ -255,8 +255,8 @@ Asynchronous modification through `change` event and `model-value`
 
 | Name      | Description       |
 |-----------|-------------------|
-| leftIcon  | Custom left icon  |
-| rightIcon | Custom right icon |
+| left-icon  | Custom left icon  |
+| right-icon | Custom right icon |
 
 ### Events
 
@@ -279,6 +279,8 @@ The component provides the following CSS variables, which can be used to customi
 |------------------------------------------|----------------------------|
 | --nut-inputnumber-icon-color             | _var(--nut-title-color)_   |
 | --nut-inputnumber-icon-void-color        | _var(--nut-disable-color)_ |
+| --nut-inputnumber-icon-size                | _20px_                     |
+| --nut-inputnumber-input-width                | _40px_                     |
 | --nut-inputnumber-input-font-size        | _12px_                     |
 | --nut-inputnumber-input-font-color       | _var(--nut-title-color)_   |
 | --nut-inputnumber-input-background-color | _var(--nut-help-color)_    |

+ 7 - 4
src/packages/__VUE/inputnumber/doc.md

@@ -242,8 +242,8 @@ app.use(InputNumber);
 | 参数           | 说明                       | 类型             | 默认值  |
 |----------------|----------------------------|------------------|---------|
 | v-model        | 初始值                     | string \| number | -       |
-| input-width    | 输入框宽度                 | string           | `40px`  |
-| button-size    | 操作符+、-尺寸             | string           | `20px`  |
+| input-width    | 输入框宽度                 | string           | ``  |
+| button-size    | 操作符+、-尺寸             | string           | ``  |
 | min            | 最小值限制                 | string \| number | `1`     |
 | max            | 最大值限制                 | string \| number | `9999`  |
 | step           | 步长                       | string \| number | `1`     |
@@ -255,8 +255,8 @@ app.use(InputNumber);
 
 | 名称      | 说明           |
 |-----------|----------------|
-| leftIcon  | 自定义左侧按钮 |
-| rightIcon | 自定义右侧按钮 |
+| left-icon  | 自定义左侧按钮 |
+| right-icon | 自定义右侧按钮 |
 
 ### Events
 
@@ -279,6 +279,8 @@ app.use(InputNumber);
 |------------------------------------------|----------------------------|
 | --nut-inputnumber-icon-color             | _var(--nut-title-color)_   |
 | --nut-inputnumber-icon-void-color        | _var(--nut-disable-color)_ |
+| --nut-inputnumber-icon-size                | _20px_                     |
+| --nut-inputnumber-input-width                | _40px_                     |
 | --nut-inputnumber-input-font-size        | _12px_                     |
 | --nut-inputnumber-input-font-color       | _var(--nut-title-color)_   |
 | --nut-inputnumber-input-background-color | _var(--nut-help-color)_    |
@@ -291,3 +293,4 @@ app.use(InputNumber);
 | --nut-inputnumber-line-height            | _normal_                   |
 | --nut-inputnumber-border-box             | _content-box_              |
 | --nut-inputnumber-display                | _flex_                     |
+

+ 6 - 4
src/packages/__VUE/inputnumber/doc.taro.md

@@ -239,8 +239,8 @@ app.use(InputNumber);
 | 参数           | 说明                       | 类型             | 默认值  |
 |----------------|----------------------------|------------------|---------|
 | v-model        | 初始值                     | string \| number | -       |
-| input-width    | 输入框宽度                 | string           | `40px`  |
-| button-size    | 操作符+、-尺寸             | string           | `20px`  |
+| input-width    | 输入框宽度                 | string           | ``  |
+| button-size    | 操作符+、-尺寸             | string           | ``  |
 | min            | 最小值限制                 | string \| number | `1`     |
 | max            | 最大值限制                 | string \| number | `9999`  |
 | step           | 步长                       | string \| number | `1`     |
@@ -252,8 +252,8 @@ app.use(InputNumber);
 
 | 名称      | 说明           |
 |-----------|----------------|
-| leftIcon  | 自定义左侧按钮 |
-| rightIcon | 自定义右侧按钮 |
+| left-icon  | 自定义左侧按钮 |
+| right-icon | 自定义右侧按钮 |
 
 ### Events
 
@@ -276,6 +276,8 @@ app.use(InputNumber);
 |------------------------------------------|----------------------------|
 | --nut-inputnumber-icon-color             | _var(--nut-title-color)_   |
 | --nut-inputnumber-icon-void-color        | _var(--nut-disable-color)_ |
+| --nut-inputnumber-icon-size                | _20px_                     |
+| --nut-inputnumber-input-width                | _40px_                     |
 | --nut-inputnumber-input-font-size        | _12px_                     |
 | --nut-inputnumber-input-font-color       | _var(--nut-title-color)_   |
 | --nut-inputnumber-input-background-color | _var(--nut-help-color)_    |

+ 6 - 0
src/packages/__VUE/inputnumber/index.scss

@@ -38,6 +38,11 @@
     display: flex;
     align-items: center;
     color: $inputnumber-icon-color;
+    .nut-icon {
+      width: $inputnumber-icon-size;
+      height: $inputnumber-icon-size;
+      font-size: $inputnumber-icon-size;
+    }
     cursor: pointer;
     &--disabled {
       color: $inputnumber-icon-void-color;
@@ -53,6 +58,7 @@
   input,
   &__text--readonly,
   &__text--input {
+    width: $inputnumber-input-width;
     height: 100%;
     text-align: center;
     display: flex;

+ 4 - 4
src/packages/__VUE/inputnumber/index.taro.vue

@@ -5,7 +5,7 @@
       :class="{ 'nut-input-number__icon--disabled': !reduceAllow() }"
       @click="reduce"
     >
-      <slot name="leftIcon">
+      <slot name="left-icon">
         <Minus :size="pxCheck(buttonSize)" />
       </slot>
     </view>
@@ -31,7 +31,7 @@
       :class="{ 'nut-input-number__icon--disabled': !addAllow() }"
       @click="add"
     >
-      <slot name="rightIcon">
+      <slot name="right-icon">
         <Plus :size="pxCheck(buttonSize)" />
       </slot>
     </view>
@@ -52,11 +52,11 @@ export default create({
     },
     inputWidth: {
       type: [Number, String],
-      default: '40px'
+      default: ''
     },
     buttonSize: {
       type: [Number, String],
-      default: '20px'
+      default: ''
     },
     min: {
       type: [Number, String],

+ 4 - 4
src/packages/__VUE/inputnumber/index.vue

@@ -5,7 +5,7 @@
       :class="{ 'nut-input-number__icon--disabled': !reduceAllow() }"
       @click="reduce"
     >
-      <slot name="leftIcon">
+      <slot name="left-icon">
         <Minus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
       </slot>
     </view>
@@ -26,7 +26,7 @@
       :class="{ 'nut-input-number__icon--disabled': !addAllow() }"
       @click="add"
     >
-      <slot name="rightIcon">
+      <slot name="right-icon">
         <Plus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
       </slot>
     </view>
@@ -47,11 +47,11 @@ export default create({
     },
     inputWidth: {
       type: [Number, String],
-      default: '40px'
+      default: ''
     },
     buttonSize: {
       type: [Number, String],
-      default: '20px'
+      default: ''
     },
     min: {
       type: [Number, String],