element-plus/website/docs/fr-FR/input-number.md

350 lines
7.6 KiB
Markdown
Raw Normal View History

## 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>
<el-input-number
v-model="num"
@change="handleChange"
:min="1"
:max="10"
></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1,
}
},
methods: {
handleChange(value) {
console.log(value)
},
},
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(1);
const handleChange = (value) => {
console.log(value);
};
return {
num,
handleChange,
};
},
});
</setup>
-->
```
:::
### 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 {
num: 1,
}
},
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(1);
return {
num,
};
},
});
</setup>
-->
```
:::
### 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 {
num: 5,
}
},
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(5);
return {
num,
};
},
});
</setup>
-->
```
:::
### 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 {
num: 2,
}
},
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(2);
return {
num,
};
},
});
</setup>
-->
```
:::
### Précision
:::demo Ajoutez l'attribut `precision` pour régler la précision du champs.
```html
<template>
<el-input-number
v-model="num"
:precision="2"
:step="0.1"
:max="10"
></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1,
}
},
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(1);
return {
num,
};
},
});
</setup>
-->
```
:::
:::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>
<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>
</template>
<script>
export default {
data() {
return {
num1: 1,
num2: 1,
num3: 1,
num4: 1,
}
},
}
</script>
<!--
<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>
-->
```
:::
### Position des contrôles
:::demo Réglez `controls-position` pour déterminer la position des boutons.
```html
<template>
<el-input-number
v-model="num"
controls-position="right"
@change="handleChange"
:min="1"
:max="10"
></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1,
}
},
methods: {
handleChange(value) {
console.log(value)
},
},
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const num = ref(1);
const handleChange = (value) => {
console.log(value);
};
return {
num,
handleChange,
};
},
});
</setup>
-->
```
:::
### Attributs
| 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 | - | - |
### Évènements
| 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) |
### Méthodes
| Méthode | Description | Paramètres |
| ------- | ----------------------------------- | ---------- |
| focus | Met le focus sur le composant. | - |
| select | Sélectionne le texte dans le champ. | — |