mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-27 03:01:14 +08:00
d55ca77137
* fix(input): input maxlength calculate the correct length * docs(input): Update maxlength comment * fix(input): format code and remove upperLimit calculated attributes * fix(input): props.maxlength is converted to number type * docs(input): modify maxlength type
716 lines
21 KiB
Markdown
716 lines
21 KiB
Markdown
## Input
|
||
|
||
Le champ d'input de base.
|
||
|
||
:::warning
|
||
Input est un composant contrôlé, il **affiche toujours la valeur liée de Vue**.
|
||
|
||
En règle générale, l'évènement `input` devrait être géré. Son handler devrait mettre à jour la valeur du composant (ou utilisez `v-model`). Dans le cas contraire, la valeur du champ ne sera pas modifiée.
|
||
|
||
Les modificateurs de `v-model` ne sont pas supportés.
|
||
:::
|
||
|
||
### Usage
|
||
|
||
:::demo
|
||
|
||
```html
|
||
<el-input placeholder="Entrez quelque chose" v-model="input"></el-input>
|
||
|
||
<script>
|
||
import { defineComponent, ref } from 'vue'
|
||
export default defineComponent ({
|
||
setup() {
|
||
return {
|
||
input: ref('')
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Désactivé
|
||
|
||
:::demo Désactivez l'input avec l'attribut `disabled`.
|
||
|
||
```html
|
||
<el-input
|
||
placeholder="Entrez quelque chose"
|
||
v-model="input"
|
||
:disabled="true">
|
||
</el-input>
|
||
|
||
<script>
|
||
import { defineComponent, ref } from 'vue'
|
||
export default defineComponent ({
|
||
setup() {
|
||
return {
|
||
input: ref('')
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Effaçable
|
||
|
||
:::demo Rendez l'input effaçable avec l'attribut `clearable`.
|
||
|
||
```html
|
||
<el-input
|
||
placeholder="Entrez quelque chose"
|
||
v-model="input"
|
||
clearable>
|
||
</el-input>
|
||
|
||
<script>
|
||
import { defineComponent, ref } from 'vue'
|
||
export default defineComponent ({
|
||
setup() {
|
||
return {
|
||
input: ref('')
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Champ de mot de passe
|
||
|
||
:::demo Créez un champ de mot de passe avec icône de visualisation grâce à l'attribut `show-password`.
|
||
|
||
```html
|
||
<el-input placeholder="Entrez votre mot de passe" v-model="input" show-password></el-input>
|
||
|
||
<script>
|
||
import { defineComponent, ref } from 'vue'
|
||
export default defineComponent ({
|
||
setup() {
|
||
return {
|
||
input: ref('')
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Input avec icône
|
||
|
||
Ajoutez une icône pour indiquer le type d'input.
|
||
|
||
:::demo Pour ajouter une icône, vous pouvez utiliser les attributs `prefix-icon` et `suffix-icon`. De plus, les slots nommés `prefix` et `suffix` fonctionnent aussi.
|
||
```html
|
||
<div class="demo-input-suffix">
|
||
<span class="demo-input-label">Avec les attributs</span>
|
||
<el-input
|
||
placeholder="Entrez une date"
|
||
suffix-icon="el-icon-date"
|
||
v-model="input1">
|
||
</el-input>
|
||
<el-input
|
||
placeholder="Entrez du texte"
|
||
prefix-icon="el-icon-search"
|
||
v-model="input2">
|
||
</el-input>
|
||
</div>
|
||
<div class="demo-input-suffix">
|
||
<span class="demo-input-label">Avec les slots</span>
|
||
<el-input
|
||
placeholder="Entrez une date"
|
||
v-model="input3">
|
||
<template #suffix>
|
||
<i class="el-input__icon el-icon-date"></i>
|
||
</template>
|
||
</el-input>
|
||
<el-input
|
||
placeholder="Entrez du texte"
|
||
v-model="input4">
|
||
<template #prefix>
|
||
<i class="el-input__icon el-icon-search"></i>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
|
||
<style>
|
||
.demo-input-label {
|
||
display: inline-block;
|
||
width: 130px;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
import { defineComponent, ref } from 'vue'
|
||
export default defineComponent ({
|
||
setup() {
|
||
return {
|
||
input1: ref(''),
|
||
input2: ref(''),
|
||
input3: ref(''),
|
||
input4: ref('')
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Zone de texte
|
||
|
||
Une zone de texte de taille réglable à la souris pour écrire plusieurs lignes. Ajoutez l'attribut `type="textarea"` pour changer `input` en un `textarea` natif.
|
||
|
||
:::demo Réglez la hauteur grâce à la propriété `rows`.
|
||
|
||
```html
|
||
<el-input
|
||
type="textarea"
|
||
:rows="2"
|
||
placeholder="Entrez quelque chose"
|
||
v-model="textarea">
|
||
</el-input>
|
||
|
||
<script>
|
||
import { defineComponent, ref } from 'vue'
|
||
export default defineComponent ({
|
||
setup() {
|
||
return {
|
||
textarea: ref('')
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Zone de texte avec taille automatique
|
||
|
||
Configurer la propriété `autosize` pour une zone de texte permet de rendre la hauteur automatique en fonction de la taille du texte. Un objet options pour être fournit à `autosize` les nombres minimal et maximal de lignes.
|
||
|
||
:::demo
|
||
|
||
```html
|
||
<el-input
|
||
type="textarea"
|
||
autosize
|
||
placeholder="Entrez quelque chose"
|
||
v-model="textarea1">
|
||
</el-input>
|
||
<div style="margin: 20px 0;"></div>
|
||
<el-input
|
||
type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 4}"
|
||
placeholder="Entrez quelque chose"
|
||
v-model="textarea2">
|
||
</el-input>
|
||
|
||
<script>
|
||
import { defineComponent, ref } from 'vue'
|
||
export default defineComponent ({
|
||
setup() {
|
||
return {
|
||
textarea1: ref(''),
|
||
textarea2: ref('')
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Input mixte
|
||
|
||
Ajouter un élément avant ou après l'input, généralement du texte ou un bouton.
|
||
|
||
:::demo Utilisez `slot` pour ajouter des éléments avant ou après l'input.
|
||
|
||
```html
|
||
<div>
|
||
<el-input placeholder="Entrez quelque chose" v-model="input1">
|
||
<template #prepend>Http://</template>
|
||
</el-input>
|
||
</div>
|
||
<div style="margin-top: 15px;">
|
||
<el-input placeholder="Entrez quelque chose" v-model="input2">
|
||
<template #append>.com</template>
|
||
</el-input>
|
||
</div>
|
||
<div style="margin-top: 15px;">
|
||
<el-input placeholder="Entrez quelque chose" v-model="input3" class="input-with-select">
|
||
<template #prepend>
|
||
<el-select v-model="select" placeholder="Choisir">
|
||
<el-option label="Restaurant" value="1"></el-option>
|
||
<el-option label="Num. Commande" value="2"></el-option>
|
||
<el-option label="Tel" value="3"></el-option>
|
||
</el-select>
|
||
</template>
|
||
<template #append>
|
||
<el-button icon="el-icon-search"></el-button>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
|
||
<style>
|
||
.el-select .el-input {
|
||
width: 110px;
|
||
}
|
||
.input-with-select .el-input-group__prepend {
|
||
background-color: #fff;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
import { defineComponent, ref } from 'vue'
|
||
export default defineComponent ({
|
||
setup() {
|
||
return {
|
||
input1: ref(''),
|
||
input2: ref(''),
|
||
input3: ref(''),
|
||
select: ref('')
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Tailles
|
||
|
||
:::demo Ajoutez l'attribut `size` pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: `large`, `small` et `mini`.
|
||
```html
|
||
<div class="demo-input-size">
|
||
<el-input
|
||
placeholder="Entrez quelque chose"
|
||
v-model="input1">
|
||
</el-input>
|
||
<el-input
|
||
size="medium"
|
||
placeholder="Entrez quelque chose"
|
||
v-model="input2">
|
||
</el-input>
|
||
<el-input
|
||
size="small"
|
||
placeholder="Entrez quelque chose"
|
||
v-model="input3">
|
||
</el-input>
|
||
<el-input
|
||
size="mini"
|
||
placeholder="Entrez quelque chose"
|
||
v-model="input4">
|
||
</el-input>
|
||
</div>
|
||
|
||
<script>
|
||
import { defineComponent, ref } from 'vue'
|
||
export default defineComponent ({
|
||
setup() {
|
||
return {
|
||
input1: ref(''),
|
||
input2: ref(''),
|
||
input3: ref(''),
|
||
input4: ref('')
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Autocomplétion
|
||
|
||
Vous pouvez obtenir de l'aide ou des suggestions basées sur ce que vous entrez.
|
||
|
||
:::demo Le composant d'autocomplétion fournit des suggestions d'entrées. L'attribut `fetch-suggestions` est une méthode qui retourne les suggestions. Dans cet exemple, `querySearch(queryString, cb)` renvoie des suggestions à l'autocomplétion via `cb(data)` quand elles sont prêtes.
|
||
```html
|
||
<el-row class="demo-autocomplete">
|
||
<el-col :span="12">
|
||
<div class="sub-title">Liste des suggestions au focus</div>
|
||
<el-autocomplete
|
||
class="inline-input"
|
||
v-model="state1"
|
||
:fetch-suggestions="querySearch"
|
||
placeholder="Entrez quelque chose"
|
||
@select="handleSelect"
|
||
></el-autocomplete>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="sub-title">Liste des suggestions à l'écriture</div>
|
||
<el-autocomplete
|
||
class="inline-input"
|
||
v-model="state2"
|
||
:fetch-suggestions="querySearch"
|
||
placeholder="Entrez quelque chose"
|
||
:trigger-on-focus="false"
|
||
@select="handleSelect"
|
||
></el-autocomplete>
|
||
</el-col>
|
||
</el-row>
|
||
<script>
|
||
import { defineComponent, ref, onMounted } from 'vue';
|
||
export default defineComponent({
|
||
setup() {
|
||
const links = ref([]);
|
||
const querySearch = (queryString, cb) => {
|
||
var results = queryString
|
||
? links.value.filter(createFilter(queryString))
|
||
: links.value;
|
||
// call callback function to return suggestions
|
||
cb(results);
|
||
};
|
||
const createFilter = (queryString) => {
|
||
return (restaurant) => {
|
||
return (
|
||
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
|
||
0
|
||
);
|
||
};
|
||
};
|
||
const loadAll = () => {
|
||
return [
|
||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||
];
|
||
};
|
||
const handleSelect = (item) => {
|
||
console.log(item);
|
||
};
|
||
onMounted(() => {
|
||
links.value = loadAll();
|
||
});
|
||
return {
|
||
links,
|
||
state1: ref(''),
|
||
state2: ref(''),
|
||
querySearch,
|
||
createFilter,
|
||
loadAll,
|
||
handleSelect,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Template personnalisé
|
||
|
||
Vous pouvez personnaliser la manière dont les suggestions sont affichées.
|
||
|
||
:::demo Utilisez `scoped slot` pour personnaliser les différentes suggestions. Dans le scope, vous pouvez accéder à l'objet suggestion via la clé `item`.
|
||
```html
|
||
<el-autocomplete
|
||
popper-class="my-autocomplete"
|
||
v-model="state"
|
||
:fetch-suggestions="querySearch"
|
||
placeholder="Entrez quelque chose"
|
||
@select="handleSelect">
|
||
<template #suffix>
|
||
<i class="el-icon-edit el-input__icon" @click="handleIconClick"></i>
|
||
</template>
|
||
<template #default="{ item }">
|
||
<div class="value">{{ item.value }}</div>
|
||
<span class="link">{{ item.link }}</span>
|
||
</template>
|
||
</el-autocomplete>
|
||
|
||
<style>
|
||
.my-autocomplete li {
|
||
line-height: normal;
|
||
padding: 7px;
|
||
}
|
||
.my-autocomplete li .name {
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
.my-autocomplete li .addr {
|
||
font-size: 12px;
|
||
color: #b4b4b4;
|
||
}
|
||
.my-autocomplete li .highlighted .addr {
|
||
color: #ddd;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
import { defineComponent, ref, onMounted } from 'vue';
|
||
export default defineComponent({
|
||
setup() {
|
||
const links = ref([]);
|
||
const querySearch = (queryString, cb) => {
|
||
var results = queryString
|
||
? links.value.filter(createFilter(queryString))
|
||
: links.value;
|
||
// call callback function to return suggestion objects
|
||
cb(results);
|
||
};
|
||
const createFilter = (queryString) => {
|
||
return (restaurant) => {
|
||
return (
|
||
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
|
||
0
|
||
);
|
||
};
|
||
};
|
||
const loadAll = () => {
|
||
return [
|
||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||
];
|
||
};
|
||
const handleSelect = (item) => {
|
||
console.log(item);
|
||
};
|
||
|
||
const handleIconClick = (ev) => {
|
||
console.log(ev);
|
||
};
|
||
|
||
onMounted(() => {
|
||
links.value = loadAll();
|
||
});
|
||
|
||
return {
|
||
links,
|
||
state: ref(''),
|
||
querySearch,
|
||
createFilter,
|
||
loadAll,
|
||
handleSelect,
|
||
handleIconClick,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Recherche distante
|
||
|
||
Vous pouvez aller chercher des infos de suggestions sur un serveur distant.
|
||
|
||
:::demo
|
||
```html
|
||
<el-autocomplete
|
||
v-model="state"
|
||
:fetch-suggestions="querySearchAsync"
|
||
placeholder="Entrez quelque chose"
|
||
@select="handleSelect"
|
||
></el-autocomplete>
|
||
|
||
<script>
|
||
import { defineComponent, ref, onMounted } from 'vue';
|
||
export default defineComponent({
|
||
setup() {
|
||
const links = ref([]);
|
||
const loadAll = () => {
|
||
return [
|
||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||
];
|
||
};
|
||
let timeout;
|
||
const querySearchAsync = (queryString, cb) => {
|
||
var results = queryString
|
||
? links.value.filter(createFilter(queryString))
|
||
: links.value;
|
||
|
||
clearTimeout(timeout);
|
||
timeout = setTimeout(() => {
|
||
cb(results);
|
||
}, 3000 * Math.random());
|
||
};
|
||
const createFilter = (queryString) => {
|
||
return (restaurant) => {
|
||
return (
|
||
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
|
||
0
|
||
);
|
||
};
|
||
};
|
||
const handleSelect = (item) => {
|
||
console.log(item);
|
||
};
|
||
onMounted(() => {
|
||
links.value = loadAll();
|
||
});
|
||
return {
|
||
links,
|
||
state: ref(''),
|
||
querySearchAsync,
|
||
createFilter,
|
||
loadAll,
|
||
handleSelect,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Taille limite
|
||
|
||
:::demo `maxlength` et `minlength` des attributs, indiquant la taille limite de l'input. Le nombre de caractères est mesuré par la taille de la chaine Javascript. Si vous utilisez `maxlength`, vous pourrez montrer le nombre de caractères en mettant `show-word-limit` à `true`.
|
||
|
||
```html
|
||
<el-input
|
||
type="text"
|
||
placeholder="Please input"
|
||
v-model="text"
|
||
maxlength="10"
|
||
show-word-limit
|
||
>
|
||
</el-input>
|
||
<div style="margin: 20px 0;"></div>
|
||
<el-input
|
||
type="textarea"
|
||
placeholder="Please input"
|
||
v-model="textarea"
|
||
maxlength="30"
|
||
show-word-limit
|
||
>
|
||
</el-input>
|
||
|
||
<script>
|
||
import { defineComponent, ref } from 'vue'
|
||
export default defineComponent ({
|
||
setup() {
|
||
return {
|
||
text: ref(''),
|
||
textarea: ref('')
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Attributs de l'Input
|
||
|
||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||
| ----| ----| ----| ---- | ----- |
|
||
| type| Type de l'input. | string | text, textarea et autres [types d'input natifs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
|
||
| model-value / v-model | Variable liée. | string / number | — | — |
|
||
| maxlength| La longueur maximale. | string / number | — | — |
|
||
| minlength| Identique à `minlength` dans l'input natif. | number | — | — |
|
||
| show-word-limit | Affiche le nombre de caractères restant， ne marche que lorsque `type` est 'text' ou 'textarea'. | boolean | — | false |
|
||
| placeholder| Placeholder de l' Input. | string | — | — |
|
||
| clearable | Si le bouton de reset apparaît. | boolean | — | false |
|
||
| show-password | Si le champ doit un champ de mot de passe avec bouton de visualisation. | boolean | — | false |
|
||
| disabled | Si le champ est désactivé. | boolean | — | false |
|
||
| size | Taille du champ, marche quand `type` n'est pas 'textarea'. | string | medium / small / mini | — |
|
||
| prefix-icon | Classe de l'icône de préfixe. | string | — | — |
|
||
| suffix-icon | Classe de l'iĉone de suffixe. | string | — | — |
|
||
| rows | Nombre de ligne pour une zone de texte, ne marche que si `type` est 'textarea'. | number | — | 2 |
|
||
| autosize | Si la zone de texte à une hauteur adaptative, ne marche que si `type` est 'textarea'. Peut accepter un objet, e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
|
||
| autocomplete | Identique à `autocomplete` dans l'input natif. | string | on / off | off |
|
||
| name | Identique à `name` dans l'input natif. | string | — | — |
|
||
| readonly | Identique à `readonly` dans l'input natif. | boolean | — | false |
|
||
| max | Identique à `max` dans l'input natif. | — | — | — |
|
||
| min | Identique à `min` dans l'input natif. | — | — | — |
|
||
| step| Identique à `step` dans l'input natif. | — | — | — |
|
||
| resize| Contrôle les changements de taille autorisés. | string | none, both, horizontal, vertical | — |
|
||
| autofocus | Identique à `autofocus` dans l'input natif. | boolean | — | false |
|
||
| form | Identique à `form` dans l'input natif. | string | — | — |
|
||
| label | Texte du label. | string | — | — |
|
||
| tabindex | tabindex de l'input. | string / number | - | - |
|
||
| validate-event | Si la validation doit avoir lieu. | boolean | - | true |
|
||
| input-style | the style of the input element or textarea element | object | - | {} |
|
||
|
||
### Slots de l'Input
|
||
|
||
| Nom | Description |
|
||
|------|--------|
|
||
| prefix | Contenu du préfixe, ne marche que si `type` est 'text'. |
|
||
| suffix | Contenu du suffixe, ne marche que si `type` est 'text'. |
|
||
| prepend | Contenu à ajouter avant l'Input, ne marche que si `type` est 'text'. |
|
||
| append | Contenu à ajouter après l'Input, ne marche que si `type` est 'text'. |
|
||
|
||
### Évènements
|
||
|
||
| Nom | Description | Paramètres |
|
||
|----| ----| ----|
|
||
| blur | Se déclenche quand Input perds le focus. | (event: Event) |
|
||
| focus | Se déclenche quand Input a le focus. | (event: Event) |
|
||
| change | Se déclenche quand la valeur change. | (value: string \ number) |
|
||
| change | Déclenché uniquement lorsque la zone de saisie perd le focus ou que l'utilisateur appuie sur Entrée. | (value: string \| number) |
|
||
| input | Déclenché lorsque la valeur d'entrée change. | (value: string \| number) |
|
||
| clear | Se déclenche quand le champ est effacé par le bouton de reset. | — |
|
||
|
||
### Méthodes de l'Input
|
||
|
||
| Méthode | Description | Paramètres |
|
||
|------|--------|-------|
|
||
| focus | Met le focus sur le champ. | — |
|
||
| blur | Retire le focus de le champ. | — |
|
||
| select | Sélectionne le texte du champ. | — |
|
||
|
||
### Attributs de l'autocomplétion
|
||
|
||
| Attribut | Description | Type | Options | Défaut |
|
||
|----| ----| ----| ---- | -----|
|
||
| placeholder| Le placeholder de l'autocomplétion. | string | — | — |
|
||
| clearable | Si un bouton d'effacement doit apparaître. | boolean | — | false |
|
||
| disabled | Si l'autocomplétion est déactivée. | boolean | — | false|
|
||
| value-key | Nom de la clé de l'objet suggestion pour l'affichage. | string | — | value |
|
||
| icon | Nom de l'icône. | string | — | — |
|
||
| model-value / v-model | Variable liée. | string | — | — |
|
||
| debounce | Délai d'attente après écriture, en millisecondes. | number | — | 300 |
|
||
| placement | Emplacement du menu popup. | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
|
||
| fetch-suggestions | La méthode pour rechercher les suggestions. Lorsqu'elles sont prêtes, appelle `callback(data:[])` pour les renvoyer à l'autocomplétion. | Function(queryString, callback) | — | — |
|
||
| popper-class | Nom de classe pour le menu de l'autocomplétion. | string | — | — |
|
||
| trigger-on-focus | Si les suggestions doivent apparaître quand l'input a le focus. | boolean | — | true |
|
||
| name | Identique à `name` dans l'input natif. | string | — | — |
|
||
| select-when-unmatched | Si un évènement `select` doit être émis après pression sur entrée quand il n'y a pas de résultats. | boolean | — | false |
|
||
| label | Texte du label. | string | — | — |
|
||
| prefix-icon | Classe de l'icône de préfixe. | string | — | — |
|
||
| suffix-icon | Classe de l'iĉone de suffixe. | string | — | — |
|
||
| hide-loading | Si l'icône de chargement doit être cachée dans le cas d'une recherche distante. | boolean | — | false |
|
||
| popper-append-to-body | Si le menu doit être ajouter au body. Si le positionnement du menu est incorrect, essayez de mettre cette propriété à `false`. | boolean | - | false |
|
||
| highlight-first-item | Si la première suggestion de la liste issue de la recherche distante doit être en surbrillance par défaut. | boolean | — | false |
|
||
|
||
### Slots de l'autocomplétion
|
||
|
||
| Nom | Description |
|
||
|------|--------|
|
||
| prefix | Contenu du préfixe. |
|
||
| suffix | Contenu du suffixe. |
|
||
| prepend | Contenu à ajouter avant le champ. |
|
||
| append | Contenu à ajouter après le champ. |
|
||
|
||
### Template personnalisé pour l'autocomplétion
|
||
|
||
| Nom | Description |
|
||
|------|--------|
|
||
| — | Contenu personnalisé pour les suggestions. Le paramètre de scope est { item }. |
|
||
|
||
### Évènements de l'autocomplétion
|
||
|
||
| Nom | Description | Paramètres |
|
||
|----| ----| ----|
|
||
| select | Se déclenche quand une suggestion est cliquée. | La suggestion sélectionnée. |
|
||
| change | Se déclenche quand la valeur change. | (value: string \ number) |
|
||
|
||
### Méthodes de l'autocomplétion
|
||
|
||
| Méthode | Description | Paramètres |
|
||
|------|--------|-------|
|
||
| focus | Met le focus sur l'élément. | — |
|