fix input-number min max prop && breadcrumb align (#514)

* fix align * fix input number min max
ElemeFE · Oct 19, 2016 · 8a75e2c · 8a75e2c
1 parent 66842c8
commit 8a75e2c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/examples/docs/zh-cn/input-number.md b/examples/docs/zh-cn/input-number.md
@@ -31,7 +31,7 @@
 :::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。
 ```html
 <template>
-  <el-input-number v-model="num1" @change="handleChange"></el-input-number>
+  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
@@ -50,7 +50,7 @@
 :::demo `disabled`属性接受一个`Boolean`，设置为`true`即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置`min`属性和`max`属性，不设置`min`和`max`时，最小值为 0。
 
 ```html
-<el-input-number v-model="num1" :disabled="true"></el-input-number>
+<el-input-number v-model="num2" :disabled="true"></el-input-number>
 ```
 :::
 
@@ -61,7 +61,7 @@
 :::demo 设置`step`属性可以控制步长，接受一个`Number`。
 
 ```html
-<el-input-number v-model="num2" :step="2"></el-input-number>
+<el-input-number v-model="num3" :step="2"></el-input-number>
 ```
 :::
 

diff --git a/packages/input-number/src/input-number.vue b/packages/input-number/src/input-number.vue
@@ -6,7 +6,7 @@
     ]"
   >
     <el-input
-      v-model="currentValue"
+      v-model.number="currentValue"
       :disabled="disabled"
       :size="size"
       :number="true"
@@ -39,9 +39,6 @@
   export default {
     name: 'ElInputNumber',
     props: {
-      value: {
-        default: 1
-      },
       step: {
         type: Number,
         default: 1
@@ -54,6 +51,9 @@
         type: Number,
         default: 0
       },
+      value: {
+        default: 0
+      },
       disabled: Boolean,
       size: String
     },
@@ -89,8 +89,18 @@
       ElInput
     },
     data() {
+      // correct the init value
+      let value = this.value;
+      if (value < this.min) {
+        this.$emit('input', this.min);
+        value = this.min;
+      }
+      if (value > this.max) {
+        this.$emit('input', this.max);
+        value = this.max;
+      }
       return {
-        currentValue: this.value,
+        currentValue: value,
         inputActive: false
       };
     },
@@ -100,7 +110,7 @@
       },
 
       currentValue(newVal, oldVal) {
-        if (!isNaN(newVal) && newVal <= this.max && newVal >= this.min) {
+        if (newVal <= this.max && newVal >= this.min) {
           this.$emit('change', newVal);
           this.$emit('input', newVal);
         } else {

diff --git a/packages/theme-default/src/breadcrumb.css b/packages/theme-default/src/breadcrumb.css
@@ -5,6 +5,7 @@
 
   @b breadcrumb {
     font-size:13px;
+    line-height: 1;
     @utils-clearfix;
 
     @e separator {