InputNumber add prop controls-outside

examples/routers/input-number.vue

@@ -43,17 +43,17 @@
     <div>
         <!-- <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
         <InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber>
-        
+
         <InputNumber @on-change="change" style="width: 200px"></InputNumber>
-        
+
         <InputNumber v-model="valueNull" @on-change="change" style="width: 200px"></InputNumber>
         <InputNumber v-model="valueNull" @on-change="change" :formatter="formatter" :parser="parser" style="width: 200px"></InputNumber>
-                
+
         <InputNumber v-model="value2" @on-focus="focus" style="width: 200px"></InputNumber>
 
         <InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> -->
 
-        
+
         <InputNumber v-model="valueNull" style="width: 200px" :min='1' :max='10000'  :precision='2' ></InputNumber>
         <InputNumber v-model="valueNull" style="width: 200px" ></InputNumber>
         <div style="margin:10px 0px">
@@ -72,6 +72,11 @@
                 :formatter="value => `${value}%`"
                 :parser="value => value.replace('%', '')"></InputNumber>
         </div>
+        <Divider></Divider>
+        <InputNumber disabled size="large" controls-outside :max="1000" :min="1" v-model="value20"></InputNumber>
+        <InputNumber size="default" controls-outside :max="1000" :min="1" v-model="value20"></InputNumber>
+        <InputNumber size="small" controls-outside :max="1000" :min="1" v-model="value20"></InputNumber>
+
     </div>
 </template>
 <script>
@@ -87,7 +92,8 @@
                 formatter2: (value) => `${value}%`,
                 parser2: (value) => value.replace('%', ''),
                 value9: 1000,
-                value10: 100
+                value10: 100,
+                value20: 2
             };
         },
         methods: {

src/components/input-number/input-number.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="wrapClasses">
-        <div :class="handlerClasses">
+        <div :class="handlerClasses" v-if="!controlsOutside">
             <a
                 @click="up"
                 :class="upClasses">
@@ -12,6 +12,20 @@
                 <span :class="innerDownClasses" @click="preventDefault"></span>
             </a>
         </div>
+        <div
+            class="ivu-input-number-controls-outside-btn ivu-input-number-controls-outside-down"
+            :class="{ 'ivu-input-number-controls-outside-btn-disabled': downDisabled }"
+            v-if="controlsOutside"
+            @click="down">
+            <i class="ivu-icon ivu-icon-ios-remove"></i>
+        </div>
+        <div
+            class="ivu-input-number-controls-outside-btn ivu-input-number-controls-outside-up"
+            :class="{ 'ivu-input-number-controls-outside-btn-disabled': upDisabled }"
+            v-if="controlsOutside"
+            @click="up">
+            <i class="ivu-icon ivu-icon-ios-add"></i>
+        </div>
         <div :class="inputWrapClasses">
             <input
                 :id="elementId"
@@ -132,6 +146,11 @@
                 type: String,
                 default: ''
             },
+            // 4.5.0
+            controlsOutside: {
+                type: Boolean,
+                default: false
+            }
         },
         data () {
             return {
@@ -148,7 +167,8 @@
                     {
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-disabled`]: this.itemDisabled,
-                        [`${prefixCls}-focused`]: this.focused
+                        [`${prefixCls}-focused`]: this.focused,
+                        [`${prefixCls}-controls-outside`]: this.controlsOutside
                     }
                 ];
             },

src/styles/components/input-number.less

@@ -188,6 +188,78 @@
             .handler-disabled();
         }
     }
+
+    &-controls-outside{
+        width: 80px + 32px * 2;
+        padding: 0 32px;
+        .@{input-number-prefix-cls}-input{
+            border-radius: 0;
+        }
+        &-btn{
+            display: inline-block;
+            width: 32px;
+            height: 32px;
+            line-height: 30px;
+            position: absolute;
+            top: 0;
+            text-align: center;
+            background-color: @input-group-bg;
+            color: @input-color;
+            cursor: pointer;
+            i{
+                font-size: 16px;
+            }
+            &:hover i{
+                color: @primary-color;
+            }
+            &-disabled, &-disabled:hover{
+                cursor: @cursor-disabled;
+                i{
+                    color: #ccc;
+                }
+            }
+        }
+        &-up{
+            right: 0;
+            border-left: 1px solid @input-border-color;
+        }
+        &-down{
+            left: 0;
+            border-right: 1px solid @input-border-color;
+        }
+    }
+    &-disabled&-controls-outside{
+        .@{input-number-prefix-cls}-controls-outside-btn{
+            cursor: @cursor-disabled;
+            i{
+                color: #ccc;
+            }
+        }
+    }
+    &-large&-controls-outside{
+        width: 80px + 40px *2;
+        padding: 0 40px;
+        .@{input-number-prefix-cls}-controls-outside-btn{
+            width: 40px;
+            height: 40px;
+            line-height: 38px;
+            i{
+                font-size: 20px;
+            }
+        }
+    }
+    &-small&-controls-outside{
+        width: 80px + 24px *2;
+        padding: 0 24px;
+        .@{input-number-prefix-cls}-controls-outside-btn{
+            width: 24px;
+            height: 24px;
+            line-height: 22px;
+            i{
+                font-size: 14px;
+            }
+        }
+    }
 }
 
 .@{form-item-prefix-cls}-error {