input-number add the controls support (#1473)

examples/docs/en-US/input-number.md

@@ -96,6 +96,7 @@ Allows you to define incremental steps.
 |step | incremental step | number | — | 1 |
 |size | size of the component | string | large/small| — |
 |disabled| whether the component is disabled | boolean | — | false |
+|controls| whether to enable the control buttons | boolean | — | true |
 
 ### Events
 

examples/docs/zh-CN/input-number.md

@@ -101,6 +101,7 @@
 | step     | 计数器步长           | number   | — | 1 |
 | size     | 计数器尺寸           | string   | large, small | — |
 | disabled | 是否禁用计数器        | boolean | — | false |
+| controls | 是否使用控制按钮        | boolean | — | true |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |

packages/input-number/src/input-number.vue

@@ -2,7 +2,8 @@
   <div class="el-input-number"
     :class="[
       size ? 'el-input-number--' + size : '',
-      { 'is-disabled': disabled }
+      { 'is-disabled': disabled },
+      { 'is-without-controls': !controls}
     ]"
   >
     <el-input
@@ -18,6 +19,7 @@
       }">
     </el-input>
     <span
+      v-if="controls"
       class="el-input-number__decrease el-icon-minus"
       :class="{'is-disabled': minDisabled}"
       v-repeat-click="decrease"
@@ -26,6 +28,7 @@
     >
     </span>
     <span
+      v-if="controls"
       class="el-input-number__increase el-icon-plus"
       :class="{'is-disabled': maxDisabled}"
       v-repeat-click="increase"
@@ -58,7 +61,11 @@
         default: 0
       },
       disabled: Boolean,
-      size: String
+      size: String,
+      controls: {
+        type: Boolean,
+        default: true
+      }
     },
     directives: {
       repeatClick: {

packages/theme-default/src/input-number.css

@@ -82,5 +82,10 @@
         padding-right: calc(var(--input-small-height) * 2 + 10);
       }
     }
+    @when without-controls {
+      & .el-input__inner {
+        padding-right: 10px;
+      }
+    }
   }
 }

test/unit/specs/input-number.spec.js

@@ -226,4 +226,20 @@ describe('InputNumber', () => {
       done();
     }, 100);
   });
+  it('controls', () => {
+    vm = createVue({
+      template: `
+        <el-input-number :controls="false" v-model="value" :max="8">
+        </el-input-number>
+      `,
+      data() {
+        return {
+          value: 8
+        };
+      }
+    }, true);
+
+    expect(vm.$el.querySelector('.el-input-number__decrease')).to.not.exist;
+    expect(vm.$el.querySelector('.el-input-number__increase')).to.not.exist;
+  });
 });