2020-08-13 15:18:26 +08:00
## InputNumber
Un champ d'input de valeurs numériques, avec un domaine personnalisable.
### Usage
:::demo Liez une variable à `v-model` dans l'élément `<el-input-number>` et c'est tout !
```html
< template >
2021-09-04 19:29:28 +08:00
< el-input-number
v-model="num"
@change ="handleChange"
:min="1"
:max="10"
>< / el-input-number >
2020-08-13 15:18:26 +08:00
< / template >
< script >
export default {
data() {
return {
2021-09-04 19:29:28 +08:00
num: 1,
}
2020-08-13 15:18:26 +08:00
},
methods: {
handleChange(value) {
2021-09-04 19:29:28 +08:00
console.log(value)
},
},
}
2020-08-13 15:18:26 +08:00
< / script >
2021-06-10 00:21:18 +08:00
<!--
< setup >
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(1);
const handleChange = (value) => {
console.log(value);
};
return {
num,
handleChange,
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
### Désactivé
:::demo L'attribut `disabled` accepte un `boolean` et si la valeur est `true` , le composant sera désactivé. Si vous souhaitez juste contrôler le domaine des valeurs possibles, ajoutez l'attribut `min` pour régler la valeur minimale et `max` pour la valeur maximale. Par défaut, la valeur minimale est `0` .
```html
< template >
< el-input-number v-model = "num" :disabled = "true" > < / el-input-number >
< / template >
< script >
export default {
data() {
return {
2021-09-04 19:29:28 +08:00
num: 1,
2020-08-13 15:18:26 +08:00
}
2021-09-04 19:29:28 +08:00
},
}
2020-08-13 15:18:26 +08:00
< / script >
2021-06-10 00:21:18 +08:00
<!--
< setup >
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(1);
return {
num,
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
### Pas
Vous pouvez déterminer un pas pour le champs.
:::demo Ajoutez l'attribut `step` pour configurer le pas.
```html
< template >
< el-input-number v-model = "num" :step = "2" > < / el-input-number >
< / template >
< script >
export default {
data() {
return {
2021-09-04 19:29:28 +08:00
num: 5,
2020-08-13 15:18:26 +08:00
}
2021-09-04 19:29:28 +08:00
},
}
2020-08-13 15:18:26 +08:00
< / script >
2021-06-10 00:21:18 +08:00
<!--
< setup >
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(5);
return {
num,
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
### Pas strict
:::demo L'attribut `step-strictly` accepte un `boolean` . Si cet attribut est `true` , la valeur de l'input ne peut être qu'un multiple de `step` .
```html
< template >
< el-input-number v-model = "num" :step = "2" step-strictly > < / el-input-number >
< / template >
< script >
export default {
data() {
return {
2021-09-04 19:29:28 +08:00
num: 2,
2020-08-13 15:18:26 +08:00
}
2021-09-04 19:29:28 +08:00
},
}
2020-08-13 15:18:26 +08:00
< / script >
2021-06-10 00:21:18 +08:00
<!--
< setup >
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(2);
return {
num,
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
### Précision
:::demo Ajoutez l'attribut `precision` pour régler la précision du champs.
```html
< template >
2021-09-04 19:29:28 +08:00
< el-input-number
v-model="num"
:precision="2"
:step="0.1"
:max="10"
>< / el-input-number >
2020-08-13 15:18:26 +08:00
< / template >
< script >
export default {
data() {
return {
2021-09-04 19:29:28 +08:00
num: 1,
2020-08-13 15:18:26 +08:00
}
2021-09-04 19:29:28 +08:00
},
}
2020-08-13 15:18:26 +08:00
< / script >
2021-06-10 00:21:18 +08:00
<!--
< setup >
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(1);
return {
num,
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
:::tip
La valeur de `precision` doit être un integer non négatif et ne doit pas être inférieure aux décimales de `step` .
:::
### Taille
Utilisez l'attribut `size` pour régler la taille avec `medium` , `small` ou `mini` .
:::demo
```html
< template >
< el-input-number v-model = "num1" > < / el-input-number >
2021-09-04 19:29:28 +08:00
< el-input-number size = "medium" v-model = "num2" > < / el-input-number >
< el-input-number size = "small" v-model = "num3" > < / el-input-number >
< el-input-number size = "mini" v-model = "num4" > < / el-input-number >
2020-08-13 15:18:26 +08:00
< / template >
< script >
export default {
data() {
return {
num1: 1,
num2: 1,
num3: 1,
2021-09-04 19:29:28 +08:00
num4: 1,
2020-08-13 15:18:26 +08:00
}
2021-09-04 19:29:28 +08:00
},
}
2020-08-13 15:18:26 +08:00
< / script >
2021-06-10 00:21:18 +08:00
<!--
< setup >
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num1 = ref(1);
const num2 = ref(2);
const num3 = ref(3);
const num4 = ref(4);
return {
num1,
num2,
num3,
num4,
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
### Position des contrôles
:::demo Réglez `controls-position` pour déterminer la position des boutons.
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
```html
< template >
2021-09-04 19:29:28 +08:00
< el-input-number
v-model="num"
controls-position="right"
@change ="handleChange"
:min="1"
:max="10"
>< / el-input-number >
2020-08-13 15:18:26 +08:00
< / template >
< script >
export default {
data() {
return {
2021-09-04 19:29:28 +08:00
num: 1,
}
2020-08-13 15:18:26 +08:00
},
methods: {
handleChange(value) {
2021-09-04 19:29:28 +08:00
console.log(value)
},
},
}
2020-08-13 15:18:26 +08:00
< / script >
2021-06-10 00:21:18 +08:00
<!--
< setup >
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(1);
const handleChange = (value) => {
console.log(value);
};
return {
num,
handleChange,
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
### Attributs
2021-09-04 19:29:28 +08:00
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| --------------------- | ------------------------------------------------ | ------------------ | ----------------------- | ----------- |
| model-value / v-model | La valeur liée. | number / undefined | — | 0 |
| 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 | Si la valeur ne peut être qu'un multiple du pas. | boolean | — | false |
| precision | La précision de la valeur. | number | — | — |
| size | La taille du composant. | string | large/medium/small/mini | large |
| disabled | Si le composant est désactivé. | boolean | — | false |
| controls | Si les boutons sont visibles. | boolean | — | true |
| controls-position | Position des boutons. | string | right | - |
| name | Identique à `name` dans l'input natif. | string | — | — |
| label | Texte du label. | string | — | — |
| placeholder | Placeholder du champ. | string | - | - |
2020-08-13 15:18:26 +08:00
### Évènements
2021-09-04 19:29:28 +08:00
| Nom | Description | Paramètres |
| ------ | ------------------------------------------- | ---------------------- |
| change | Se déclenche quand la valeur change. | currentValue, oldValue |
| blur | Se déclenche quand le champ perds le focus. | (event: Event) |
| focus | Se déclenche quand le champ a le focus. | (event: Event) |
2020-08-13 15:18:26 +08:00
### Méthodes
2021-09-04 19:29:28 +08:00
| Méthode | Description | Paramètres |
| ------- | ----------------------------------- | ---------- |
| focus | Met le focus sur le composant. | - |
| select | Sélectionne le texte dans le champ. | — |