mirror of https://github.com/ElemeFE/element
fix input-number min max prop && breadcrumb align (#514)
* fix align * fix input number min maxpull/516/head
parent
66842c80e8
commit
8a75e2c833
|
@ -31,7 +31,7 @@
|
||||||
:::demo 要使用它,只需要在`el-input-number`元素中使用`v-model`绑定变量即可,变量的初始值即为默认值。
|
:::demo 要使用它,只需要在`el-input-number`元素中使用`v-model`绑定变量即可,变量的初始值即为默认值。
|
||||||
```html
|
```html
|
||||||
<template>
|
<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>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
@ -50,7 +50,7 @@
|
||||||
:::demo `disabled`属性接受一个`Boolean`,设置为`true`即可禁用整个组件,如果你只需要控制数值在某一范围内,可以设置`min`属性和`max`属性,不设置`min`和`max`时,最小值为 0。
|
:::demo `disabled`属性接受一个`Boolean`,设置为`true`即可禁用整个组件,如果你只需要控制数值在某一范围内,可以设置`min`属性和`max`属性,不设置`min`和`max`时,最小值为 0。
|
||||||
|
|
||||||
```html
|
```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`。
|
:::demo 设置`step`属性可以控制步长,接受一个`Number`。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<el-input-number v-model="num2" :step="2"></el-input-number>
|
<el-input-number v-model="num3" :step="2"></el-input-number>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<el-input
|
<el-input
|
||||||
v-model="currentValue"
|
v-model.number="currentValue"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:size="size"
|
:size="size"
|
||||||
:number="true"
|
:number="true"
|
||||||
|
@ -39,9 +39,6 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'ElInputNumber',
|
name: 'ElInputNumber',
|
||||||
props: {
|
props: {
|
||||||
value: {
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
step: {
|
step: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 1
|
default: 1
|
||||||
|
@ -54,6 +51,9 @@
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
|
value: {
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
size: String
|
size: String
|
||||||
},
|
},
|
||||||
|
@ -89,8 +89,18 @@
|
||||||
ElInput
|
ElInput
|
||||||
},
|
},
|
||||||
data() {
|
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 {
|
return {
|
||||||
currentValue: this.value,
|
currentValue: value,
|
||||||
inputActive: false
|
inputActive: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -100,7 +110,7 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
currentValue(newVal, oldVal) {
|
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('change', newVal);
|
||||||
this.$emit('input', newVal);
|
this.$emit('input', newVal);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
|
|
||||||
@b breadcrumb {
|
@b breadcrumb {
|
||||||
font-size:13px;
|
font-size:13px;
|
||||||
|
line-height: 1;
|
||||||
@utils-clearfix;
|
@utils-clearfix;
|
||||||
|
|
||||||
@e separator {
|
@e separator {
|
||||||
|
|
Loading…
Reference in New Issue