diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md
index ad59523a6..9670fd297 100644
--- a/examples/docs/en-US/input-number.md
+++ b/examples/docs/en-US/input-number.md
@@ -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
+
+
+
+
+```
+:::
+
### Precision
:::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` |
|max | the maximum allowed value | number | — | `Infinity` |
|step | incremental step | number | — | 1 |
+|step-strictly | whether input value can only be multiple of step | number | — | false |
|precision | precision of input value | number | — | — |
|size | size of the component | string | large/small| — |
|disabled| whether the component is disabled | boolean | — | false |
diff --git a/examples/docs/es/input-number.md b/examples/docs/es/input-number.md
index 362f8db21..b880635f1 100644
--- a/examples/docs/es/input-number.md
+++ b/examples/docs/es/input-number.md
@@ -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
+
+
+
+
+```
+:::
+
### Precision
:::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` |
| max | el valor maximo permitido | number | — | `Infinity` |
| 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 | — | — |
| size | tamaño del componente | string | large/small | — |
| disabled | si el componente esta deshabilitado | boolean | — | false |
diff --git a/examples/docs/fr-FR/input-number.md b/examples/docs/fr-FR/input-number.md
index 76016ed0a..7a6eeba07 100644
--- a/examples/docs/fr-FR/input-number.md
+++ b/examples/docs/fr-FR/input-number.md
@@ -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
+
+
+
+
+```
+:::
+
### Précision
:::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` |
| max | La valeur maximale autorisée. | number | — | `Infinity` |
| 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 | — | — |
| size | La taille du composant. | string | large/small| — |
| disabled| Si le composant est désactivé. | boolean | — | false |
diff --git a/examples/docs/zh-CN/input-number.md b/examples/docs/zh-CN/input-number.md
index 3961be6a1..e57836815 100644
--- a/examples/docs/zh-CN/input-number.md
+++ b/examples/docs/zh-CN/input-number.md
@@ -68,6 +68,26 @@
```
:::
+### 严格步数
+
+:::demo `step-strictly`属性接受一个`Boolean`。如果这个属性被设置为`true`,则只能输入步数的倍数。
+
+```html
+
+
+
+
+```
+:::
+
### 精度
:::demo 设置 `precision` 属性可以控制数值精度,接收一个 `Number`。
@@ -152,6 +172,7 @@
| min | 设置计数器允许的最小值 | number | — | -Infinity |
| max | 设置计数器允许的最大值 | number | — | Infinity |
| step | 计数器步长 | number | — | 1 |
+| step-strictly | 是否只能输入 step 的倍数 | number | — | false |
| precision| 数值精度 | number | — | — |
| size | 计数器尺寸 | string | large, small | — |
| disabled | 是否禁用计数器 | boolean | — | false |
diff --git a/packages/input-number/src/input-number.vue b/packages/input-number/src/input-number.vue
index 70bf26c72..364ebdc60 100644
--- a/packages/input-number/src/input-number.vue
+++ b/packages/input-number/src/input-number.vue
@@ -72,6 +72,10 @@
type: Number,
default: 1
},
+ stepStrictly: {
+ type: Boolean,
+ default: false
+ },
max: {
type: Number,
default: Infinity
@@ -116,6 +120,13 @@
if (isNaN(newVal)) {
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) {
newVal = this.toPrecision(newVal, this.precision);
}
@@ -163,12 +174,22 @@
if (this.userInput !== null) {
return this.userInput;
}
- const currentValue = this.currentValue;
- if (typeof currentValue === 'number' && this.precision !== undefined) {
- return currentValue.toFixed(this.precision);
- } else {
- return currentValue;
+
+ let currentValue = this.currentValue;
+
+ if (typeof currentValue === 'number') {
+ 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: {
diff --git a/test/unit/specs/input-number.spec.js b/test/unit/specs/input-number.spec.js
index 34a28db16..dbff288b6 100644
--- a/test/unit/specs/input-number.spec.js
+++ b/test/unit/specs/input-number.spec.js
@@ -1,4 +1,4 @@
-import { createVue, triggerEvent, triggerClick, destroyVM } from '../util';
+import {createVue, triggerEvent, triggerClick, destroyVM, waitImmediate} from '../util';
const DELAY = 1;
@@ -142,6 +142,29 @@ describe('InputNumber', () => {
});
});
});
+ it('step strictly', async() => {
+ vm = createVue({
+ template: `
+
+
+ `,
+ 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 => {
vm = createVue({
template: `
diff --git a/types/input-number.d.ts b/types/input-number.d.ts
index deec6f59b..76288ffc3 100644
--- a/types/input-number.d.ts
+++ b/types/input-number.d.ts
@@ -35,7 +35,10 @@ export declare class ElInputNumber extends ElementUIComponent {
name: string
/** Precision of input value */
- precision: Number
+ precision: number
+
+ /** whether input value can only be multiple of step */
+ stepStrictly: boolean
/**
* Focus the Input component