mirror of https://github.com/ElemeFE/element
InputNumber: add step-strictly attribute (#15050)
parent
6ecf925d7e
commit
1fe6849a63
|
@ -69,6 +69,26 @@ Allows you to define incremental steps.
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
### Step strictly
|
||||||
|
|
||||||
|
:::demo The `step-strictly` attribute accepts a `boolean`. if this attribute is `true`, input value can only be multiple of step.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<el-input-number v-model="num" :step="2" step-strictly></el-input-number>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
num: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
### Precision
|
### Precision
|
||||||
|
|
||||||
:::demo Add `precision` attribute to set the precision of input value.
|
:::demo Add `precision` attribute to set the precision of input value.
|
||||||
|
@ -154,6 +174,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|
||||||
|min | the minimum allowed value | number | — | `-Infinity` |
|
|min | the minimum allowed value | number | — | `-Infinity` |
|
||||||
|max | the maximum allowed value | number | — | `Infinity` |
|
|max | the maximum allowed value | number | — | `Infinity` |
|
||||||
|step | incremental step | number | — | 1 |
|
|step | incremental step | number | — | 1 |
|
||||||
|
|step-strictly | whether input value can only be multiple of step | number | — | false |
|
||||||
|precision | precision of input value | number | — | — |
|
|precision | precision of input value | number | — | — |
|
||||||
|size | size of the component | string | large/small| — |
|
|size | size of the component | string | large/small| — |
|
||||||
|disabled| whether the component is disabled | boolean | — | false |
|
|disabled| whether the component is disabled | boolean | — | false |
|
||||||
|
|
|
@ -69,6 +69,26 @@ Le permite definir el nivel de incremento de los saltos.
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
### Step strictly
|
||||||
|
|
||||||
|
:::demo The `step-strictly` attribute accepts a `boolean`. if this attribute is `true`, input value can only be multiple of step.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<el-input-number v-model="num" :step="2" step-strictly></el-input-number>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
num: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
### Precision
|
### Precision
|
||||||
|
|
||||||
:::demo Add `precision` attribute to set the precision of input value.
|
:::demo Add `precision` attribute to set the precision of input value.
|
||||||
|
@ -155,6 +175,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
|
||||||
| min | el valor mínimo permitido | number | — | `-Infinity` |
|
| min | el valor mínimo permitido | number | — | `-Infinity` |
|
||||||
| max | el valor maximo permitido | number | — | `Infinity` |
|
| max | el valor maximo permitido | number | — | `Infinity` |
|
||||||
| step | incremento (salto) | number | — | 1 |
|
| step | incremento (salto) | number | — | 1 |
|
||||||
|
| step-strictly | whether input value can can only be multiple of step | number | — | false |
|
||||||
| precision | precisión del valor del input | number | — | — |
|
| precision | precisión del valor del input | number | — | — |
|
||||||
| size | tamaño del componente | string | large/small | — |
|
| size | tamaño del componente | string | large/small | — |
|
||||||
| disabled | si el componente esta deshabilitado | boolean | — | false |
|
| disabled | si el componente esta deshabilitado | boolean | — | false |
|
||||||
|
|
|
@ -69,6 +69,26 @@ Vous pouvez déterminer un pas pour le champs.
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
### Step strictly
|
||||||
|
|
||||||
|
:::demo The `step-strictly` attribute accepts a `boolean`. if this attribute is `true`, input value can only be multiple of step.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<el-input-number v-model="num" :step="2" step-strictly></el-input-number>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
num: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
### Précision
|
### Précision
|
||||||
|
|
||||||
:::demo Ajoutez l'attribut `precision` pour régler la précision du champs.
|
:::demo Ajoutez l'attribut `precision` pour régler la précision du champs.
|
||||||
|
@ -154,6 +174,7 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
|
||||||
| min | La valeur minimale autorisée. | number | — | `-Infinity` |
|
| min | La valeur minimale autorisée. | number | — | `-Infinity` |
|
||||||
| max | La valeur maximale autorisée. | number | — | `Infinity` |
|
| max | La valeur maximale autorisée. | number | — | `Infinity` |
|
||||||
| step | Le pas pour l'incrémentation. | number | — | 1 |
|
| step | Le pas pour l'incrémentation. | number | — | 1 |
|
||||||
|
| step-strictly | whether input value can only be multiple of step | number | — | false |
|
||||||
| precision | La précision de la valeur. | number | — | — |
|
| precision | La précision de la valeur. | number | — | — |
|
||||||
| size | La taille du composant. | string | large/small| — |
|
| size | La taille du composant. | string | large/small| — |
|
||||||
| disabled| Si le composant est désactivé. | boolean | — | false |
|
| disabled| Si le composant est désactivé. | boolean | — | false |
|
||||||
|
|
|
@ -68,6 +68,26 @@
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
### 严格步数
|
||||||
|
|
||||||
|
:::demo `step-strictly`属性接受一个`Boolean`。如果这个属性被设置为`true`,则只能输入步数的倍数。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<el-input-number v-model="num" :step="2" step-strictly></el-input-number>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
num: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
### 精度
|
### 精度
|
||||||
|
|
||||||
:::demo 设置 `precision` 属性可以控制数值精度,接收一个 `Number`。
|
:::demo 设置 `precision` 属性可以控制数值精度,接收一个 `Number`。
|
||||||
|
@ -152,6 +172,7 @@
|
||||||
| min | 设置计数器允许的最小值 | number | — | -Infinity |
|
| min | 设置计数器允许的最小值 | number | — | -Infinity |
|
||||||
| max | 设置计数器允许的最大值 | number | — | Infinity |
|
| max | 设置计数器允许的最大值 | number | — | Infinity |
|
||||||
| step | 计数器步长 | number | — | 1 |
|
| step | 计数器步长 | number | — | 1 |
|
||||||
|
| step-strictly | 是否只能输入 step 的倍数 | number | — | false |
|
||||||
| precision| 数值精度 | number | — | — |
|
| precision| 数值精度 | number | — | — |
|
||||||
| size | 计数器尺寸 | string | large, small | — |
|
| size | 计数器尺寸 | string | large, small | — |
|
||||||
| disabled | 是否禁用计数器 | boolean | — | false |
|
| disabled | 是否禁用计数器 | boolean | — | false |
|
||||||
|
|
|
@ -72,6 +72,10 @@
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 1
|
default: 1
|
||||||
},
|
},
|
||||||
|
stepStrictly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
max: {
|
max: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: Infinity
|
default: Infinity
|
||||||
|
@ -116,6 +120,13 @@
|
||||||
if (isNaN(newVal)) {
|
if (isNaN(newVal)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.stepStrictly) {
|
||||||
|
const stepPrecision = this.getPrecision(this.step);
|
||||||
|
const precisionFactor = Math.pow(10, stepPrecision);
|
||||||
|
newVal = Math.round(newVal / this.step) * precisionFactor * this.step / precisionFactor;
|
||||||
|
}
|
||||||
|
|
||||||
if (this.precision !== undefined) {
|
if (this.precision !== undefined) {
|
||||||
newVal = this.toPrecision(newVal, this.precision);
|
newVal = this.toPrecision(newVal, this.precision);
|
||||||
}
|
}
|
||||||
|
@ -163,12 +174,22 @@
|
||||||
if (this.userInput !== null) {
|
if (this.userInput !== null) {
|
||||||
return this.userInput;
|
return this.userInput;
|
||||||
}
|
}
|
||||||
const currentValue = this.currentValue;
|
|
||||||
if (typeof currentValue === 'number' && this.precision !== undefined) {
|
let currentValue = this.currentValue;
|
||||||
return currentValue.toFixed(this.precision);
|
|
||||||
} else {
|
if (typeof currentValue === 'number') {
|
||||||
return currentValue;
|
if (this.stepStrictly) {
|
||||||
|
const stepPrecision = this.getPrecision(this.step);
|
||||||
|
const precisionFactor = Math.pow(10, stepPrecision);
|
||||||
|
currentValue = Math.round(currentValue / this.step) * precisionFactor * this.step / precisionFactor;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.precision !== undefined) {
|
||||||
|
currentValue = currentValue.toFixed(this.precision);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return currentValue;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { createVue, triggerEvent, triggerClick, destroyVM } from '../util';
|
import {createVue, triggerEvent, triggerClick, destroyVM, waitImmediate} from '../util';
|
||||||
|
|
||||||
const DELAY = 1;
|
const DELAY = 1;
|
||||||
|
|
||||||
|
@ -142,6 +142,29 @@ describe('InputNumber', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
it('step strictly', async() => {
|
||||||
|
vm = createVue({
|
||||||
|
template: `
|
||||||
|
<el-input-number v-model="value" :step="1.2" step-strictly>
|
||||||
|
</el-input-number>
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: 5
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
let input = vm.$el.querySelector('input');
|
||||||
|
await waitImmediate();
|
||||||
|
expect(vm.value).to.be.equal(4.8);
|
||||||
|
expect(input.value).to.be.equal('4.8');
|
||||||
|
vm.value = '8';
|
||||||
|
|
||||||
|
await waitImmediate();
|
||||||
|
expect(vm.value).to.be.equal(8.4);
|
||||||
|
expect(input.value).to.be.equal('8.4');
|
||||||
|
});
|
||||||
it('min', done => {
|
it('min', done => {
|
||||||
vm = createVue({
|
vm = createVue({
|
||||||
template: `
|
template: `
|
||||||
|
|
|
@ -35,7 +35,10 @@ export declare class ElInputNumber extends ElementUIComponent {
|
||||||
name: string
|
name: string
|
||||||
|
|
||||||
/** Precision of input value */
|
/** Precision of input value */
|
||||||
precision: Number
|
precision: number
|
||||||
|
|
||||||
|
/** whether input value can only be multiple of step */
|
||||||
|
stepStrictly: boolean
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Focus the Input component
|
* Focus the Input component
|
||||||
|
|
Loading…
Reference in New Issue