element/examples/docs/fr-FR/loading.md

219 lines
6.3 KiB
Markdown
Raw Normal View History

I18n: French translation (#12153) * Docs: add french translation (fr-FR) in "components.json". * Docs: add french translation (fr-FR) in "page.json" * Docs: add french translation (fr-FR) in "route.json" * Docs: add french translation (fr-FR) in "title.json" * Docs: remove a comma in "title.json" * Docs: translate alert.md into french (fr-FR) * Docs: remove a comma in "component.json" * Docs: translate badge.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * Docs: translate button.md into french (fr-FR) * Docs: translate card.md into french (fr-FR) * Docs: translate carousel.md into french (fr-FR) * Docs: translate cascader.md into french (fr-FR) * Docs: translate checkbox.md into french (fr-FR) * Docs: translate collapse.md into french (fr-FR) * Docs: translate color-picker.md into french (fr-FR) * Docs: translate color.md into french (fr-FR) * Docs: translate container.md into french (fr-FR) * Docs: translate custom-theme.md into french (fr-FR) * Docs: translate date-picker.md into french (fr-FR) * Docs: translate datetime-picker.md into french (fr-FR) * Docs: translate dialog.md into french (fr-FR) * Docs: translate form.md into french (fr-FR) * Docs: translate i18n.md into french (fr-FR) * Docs: translate icon.md into french (fr-FR) * Docs: translate input-number.md into french (fr-FR) * Docs: translate input.md into french (fr-FR) * Docs: translate installation.md into french (fr-FR) * Docs: translate dropdown.md into french (fr-FR) * Docs: translate layout.md into french (fr-FR) * Docs: translate loading.md into french (fr-FR) * Docs: translate menu.md into french (fr-FR) * Docs: translate message-box.md into french (fr-FR) * Docs: translate message.md into french (fr-FR) * Docs: translate notification.md into french (fr-FR) * Docs: translate pagination.md into french (fr-FR) * Docs: translate popover.md into french (fr-FR) * Docs: translate progress.md into french (fr-FR) * Docs: translate quickstart.md into french (fr-FR) * Docs: translate radio.md into french (fr-FR) * Docs: translate rate.md into french (fr-FR) * Docs: translate select.md into french (fr-FR) * Docs: translate slider.md into french (fr-FR) * Docs: translate steps.md into french (fr-FR) * Docs: translate switch.md into french (fr-FR) * Docs: translate table.md into french (fr-FR) * Docs: translate tabs.md into french (fr-FR) * Docs: translate tag.md into french (fr-FR) * Docs: translate time-picker.md into french (fr-FR) * Docs: translate tooltip.md into french (fr-FR) * Docs: translate transfer.md into french (fr-FR) * Docs: translate transition.md into french (fr-FR) * Docs: translate tree.md into french (fr-FR) * Docs: translate typography.md into french (fr-FR) * Docs: translate upload.md into french (fr-FR) * Docs: update the configuration for the french translation * Docs: update the french documentation from 2.4.4 to 2.4.11 * Changelog: translate to line 408 into french (fr-FR) * Changelog: finish the translation into french (fr-FR) * Changelog: update from 2.4.11 to 2.5.4 * Doc: update french translation from 2.4.11 to 2.5.4 * Changelog: fix a display bug with the subtitles * Examples: add french language (fr-FR) in search.vue component * Doc: change some french titles * Doc: add the french locale to app.vue
2019-02-12 01:08:19 +00:00
## Loading
Affiche une animation durant le chargement de données.
### Loading dans un conteneur
Affiche une animation dans un conteneur (Comme un tableau par exemple) pendant le chargement des données.
:::demo Element fournit deux moyens d'invoquer Loading: la directive et le service. Pour la directive `v-loading`, attachez simplement un `boolean`. Par défaut le masque sera ajouté à l'élément contenant la directive. Ajoutez le modificateur `body` pour ajouter le masque à l'élément body.
```html
<template>
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Nom"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Adresse">
</el-table-column>
</el-table>
</template>
<style>
body {
margin: 0;
}
</style>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}],
loading: true
};
}
};
</script>
```
:::
### Personnalisation
Vous pouvez personnaliser le texte, le spinner et la couleur de fond.
:::demo Ajoutez l'attribut `element-loading-text` à l'élement sur lequel `v-loading` est attaché et sa valeur sera affichée sous le spinner. De la même façon, `element-loading-spinner` et `element-loading-background` permettent de personnaliser le spinner et la couleur de fond.
```html
<template>
<el-table
2019-04-12 02:40:46 +00:00
v-loading="loading"
I18n: French translation (#12153) * Docs: add french translation (fr-FR) in "components.json". * Docs: add french translation (fr-FR) in "page.json" * Docs: add french translation (fr-FR) in "route.json" * Docs: add french translation (fr-FR) in "title.json" * Docs: remove a comma in "title.json" * Docs: translate alert.md into french (fr-FR) * Docs: remove a comma in "component.json" * Docs: translate badge.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * Docs: translate button.md into french (fr-FR) * Docs: translate card.md into french (fr-FR) * Docs: translate carousel.md into french (fr-FR) * Docs: translate cascader.md into french (fr-FR) * Docs: translate checkbox.md into french (fr-FR) * Docs: translate collapse.md into french (fr-FR) * Docs: translate color-picker.md into french (fr-FR) * Docs: translate color.md into french (fr-FR) * Docs: translate container.md into french (fr-FR) * Docs: translate custom-theme.md into french (fr-FR) * Docs: translate date-picker.md into french (fr-FR) * Docs: translate datetime-picker.md into french (fr-FR) * Docs: translate dialog.md into french (fr-FR) * Docs: translate form.md into french (fr-FR) * Docs: translate i18n.md into french (fr-FR) * Docs: translate icon.md into french (fr-FR) * Docs: translate input-number.md into french (fr-FR) * Docs: translate input.md into french (fr-FR) * Docs: translate installation.md into french (fr-FR) * Docs: translate dropdown.md into french (fr-FR) * Docs: translate layout.md into french (fr-FR) * Docs: translate loading.md into french (fr-FR) * Docs: translate menu.md into french (fr-FR) * Docs: translate message-box.md into french (fr-FR) * Docs: translate message.md into french (fr-FR) * Docs: translate notification.md into french (fr-FR) * Docs: translate pagination.md into french (fr-FR) * Docs: translate popover.md into french (fr-FR) * Docs: translate progress.md into french (fr-FR) * Docs: translate quickstart.md into french (fr-FR) * Docs: translate radio.md into french (fr-FR) * Docs: translate rate.md into french (fr-FR) * Docs: translate select.md into french (fr-FR) * Docs: translate slider.md into french (fr-FR) * Docs: translate steps.md into french (fr-FR) * Docs: translate switch.md into french (fr-FR) * Docs: translate table.md into french (fr-FR) * Docs: translate tabs.md into french (fr-FR) * Docs: translate tag.md into french (fr-FR) * Docs: translate time-picker.md into french (fr-FR) * Docs: translate tooltip.md into french (fr-FR) * Docs: translate transfer.md into french (fr-FR) * Docs: translate transition.md into french (fr-FR) * Docs: translate tree.md into french (fr-FR) * Docs: translate typography.md into french (fr-FR) * Docs: translate upload.md into french (fr-FR) * Docs: update the configuration for the french translation * Docs: update the french documentation from 2.4.4 to 2.4.11 * Changelog: translate to line 408 into french (fr-FR) * Changelog: finish the translation into french (fr-FR) * Changelog: update from 2.4.11 to 2.5.4 * Doc: update french translation from 2.4.11 to 2.5.4 * Changelog: fix a display bug with the subtitles * Examples: add french language (fr-FR) in search.vue component * Doc: change some french titles * Doc: add the french locale to app.vue
2019-02-12 01:08:19 +00:00
element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Nom"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Adresse">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}],
2019-04-12 02:40:46 +00:00
loading: true
I18n: French translation (#12153) * Docs: add french translation (fr-FR) in "components.json". * Docs: add french translation (fr-FR) in "page.json" * Docs: add french translation (fr-FR) in "route.json" * Docs: add french translation (fr-FR) in "title.json" * Docs: remove a comma in "title.json" * Docs: translate alert.md into french (fr-FR) * Docs: remove a comma in "component.json" * Docs: translate badge.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * Docs: translate button.md into french (fr-FR) * Docs: translate card.md into french (fr-FR) * Docs: translate carousel.md into french (fr-FR) * Docs: translate cascader.md into french (fr-FR) * Docs: translate checkbox.md into french (fr-FR) * Docs: translate collapse.md into french (fr-FR) * Docs: translate color-picker.md into french (fr-FR) * Docs: translate color.md into french (fr-FR) * Docs: translate container.md into french (fr-FR) * Docs: translate custom-theme.md into french (fr-FR) * Docs: translate date-picker.md into french (fr-FR) * Docs: translate datetime-picker.md into french (fr-FR) * Docs: translate dialog.md into french (fr-FR) * Docs: translate form.md into french (fr-FR) * Docs: translate i18n.md into french (fr-FR) * Docs: translate icon.md into french (fr-FR) * Docs: translate input-number.md into french (fr-FR) * Docs: translate input.md into french (fr-FR) * Docs: translate installation.md into french (fr-FR) * Docs: translate dropdown.md into french (fr-FR) * Docs: translate layout.md into french (fr-FR) * Docs: translate loading.md into french (fr-FR) * Docs: translate menu.md into french (fr-FR) * Docs: translate message-box.md into french (fr-FR) * Docs: translate message.md into french (fr-FR) * Docs: translate notification.md into french (fr-FR) * Docs: translate pagination.md into french (fr-FR) * Docs: translate popover.md into french (fr-FR) * Docs: translate progress.md into french (fr-FR) * Docs: translate quickstart.md into french (fr-FR) * Docs: translate radio.md into french (fr-FR) * Docs: translate rate.md into french (fr-FR) * Docs: translate select.md into french (fr-FR) * Docs: translate slider.md into french (fr-FR) * Docs: translate steps.md into french (fr-FR) * Docs: translate switch.md into french (fr-FR) * Docs: translate table.md into french (fr-FR) * Docs: translate tabs.md into french (fr-FR) * Docs: translate tag.md into french (fr-FR) * Docs: translate time-picker.md into french (fr-FR) * Docs: translate tooltip.md into french (fr-FR) * Docs: translate transfer.md into french (fr-FR) * Docs: translate transition.md into french (fr-FR) * Docs: translate tree.md into french (fr-FR) * Docs: translate typography.md into french (fr-FR) * Docs: translate upload.md into french (fr-FR) * Docs: update the configuration for the french translation * Docs: update the french documentation from 2.4.4 to 2.4.11 * Changelog: translate to line 408 into french (fr-FR) * Changelog: finish the translation into french (fr-FR) * Changelog: update from 2.4.11 to 2.5.4 * Doc: update french translation from 2.4.11 to 2.5.4 * Changelog: fix a display bug with the subtitles * Examples: add french language (fr-FR) in search.vue component * Doc: change some french titles * Doc: add the french locale to app.vue
2019-02-12 01:08:19 +00:00
};
}
};
</script>
```
:::
### Chargement plein écran
Affichez une animation en plein écran quand vous charger des données.
:::demo Quand il est utilisé comme une directive, un Loading plein écran nécessite le modificateur `fullscreen` qui sera ajouté au body. Dans ce cas, si vous souhaitez désactiver le défilement du body, vous pouvez ajouter le modificateur `lock`. Quand il est utilisé comme service, Loading est en plein écran par défaut.
```html
<template>
<el-button
type="primary"
@click="openFullScreen"
v-loading.fullscreen.lock="fullscreenLoading">
Comme directive
</el-button>
<el-button
type="primary"
2019-04-12 02:40:46 +00:00
@click="openFullScreen">
I18n: French translation (#12153) * Docs: add french translation (fr-FR) in "components.json". * Docs: add french translation (fr-FR) in "page.json" * Docs: add french translation (fr-FR) in "route.json" * Docs: add french translation (fr-FR) in "title.json" * Docs: remove a comma in "title.json" * Docs: translate alert.md into french (fr-FR) * Docs: remove a comma in "component.json" * Docs: translate badge.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * Docs: translate button.md into french (fr-FR) * Docs: translate card.md into french (fr-FR) * Docs: translate carousel.md into french (fr-FR) * Docs: translate cascader.md into french (fr-FR) * Docs: translate checkbox.md into french (fr-FR) * Docs: translate collapse.md into french (fr-FR) * Docs: translate color-picker.md into french (fr-FR) * Docs: translate color.md into french (fr-FR) * Docs: translate container.md into french (fr-FR) * Docs: translate custom-theme.md into french (fr-FR) * Docs: translate date-picker.md into french (fr-FR) * Docs: translate datetime-picker.md into french (fr-FR) * Docs: translate dialog.md into french (fr-FR) * Docs: translate form.md into french (fr-FR) * Docs: translate i18n.md into french (fr-FR) * Docs: translate icon.md into french (fr-FR) * Docs: translate input-number.md into french (fr-FR) * Docs: translate input.md into french (fr-FR) * Docs: translate installation.md into french (fr-FR) * Docs: translate dropdown.md into french (fr-FR) * Docs: translate layout.md into french (fr-FR) * Docs: translate loading.md into french (fr-FR) * Docs: translate menu.md into french (fr-FR) * Docs: translate message-box.md into french (fr-FR) * Docs: translate message.md into french (fr-FR) * Docs: translate notification.md into french (fr-FR) * Docs: translate pagination.md into french (fr-FR) * Docs: translate popover.md into french (fr-FR) * Docs: translate progress.md into french (fr-FR) * Docs: translate quickstart.md into french (fr-FR) * Docs: translate radio.md into french (fr-FR) * Docs: translate rate.md into french (fr-FR) * Docs: translate select.md into french (fr-FR) * Docs: translate slider.md into french (fr-FR) * Docs: translate steps.md into french (fr-FR) * Docs: translate switch.md into french (fr-FR) * Docs: translate table.md into french (fr-FR) * Docs: translate tabs.md into french (fr-FR) * Docs: translate tag.md into french (fr-FR) * Docs: translate time-picker.md into french (fr-FR) * Docs: translate tooltip.md into french (fr-FR) * Docs: translate transfer.md into french (fr-FR) * Docs: translate transition.md into french (fr-FR) * Docs: translate tree.md into french (fr-FR) * Docs: translate typography.md into french (fr-FR) * Docs: translate upload.md into french (fr-FR) * Docs: update the configuration for the french translation * Docs: update the french documentation from 2.4.4 to 2.4.11 * Changelog: translate to line 408 into french (fr-FR) * Changelog: finish the translation into french (fr-FR) * Changelog: update from 2.4.11 to 2.5.4 * Doc: update french translation from 2.4.11 to 2.5.4 * Changelog: fix a display bug with the subtitles * Examples: add french language (fr-FR) in search.vue component * Doc: change some french titles * Doc: add the french locale to app.vue
2019-02-12 01:08:19 +00:00
Comme service
</el-button>
</template>
<script>
export default {
data() {
return {
fullscreenLoading: false
}
},
methods: {
openFullScreen() {
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 2000);
},
2019-04-12 02:40:46 +00:00
openFullScreen() {
I18n: French translation (#12153) * Docs: add french translation (fr-FR) in "components.json". * Docs: add french translation (fr-FR) in "page.json" * Docs: add french translation (fr-FR) in "route.json" * Docs: add french translation (fr-FR) in "title.json" * Docs: remove a comma in "title.json" * Docs: translate alert.md into french (fr-FR) * Docs: remove a comma in "component.json" * Docs: translate badge.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * Docs: translate button.md into french (fr-FR) * Docs: translate card.md into french (fr-FR) * Docs: translate carousel.md into french (fr-FR) * Docs: translate cascader.md into french (fr-FR) * Docs: translate checkbox.md into french (fr-FR) * Docs: translate collapse.md into french (fr-FR) * Docs: translate color-picker.md into french (fr-FR) * Docs: translate color.md into french (fr-FR) * Docs: translate container.md into french (fr-FR) * Docs: translate custom-theme.md into french (fr-FR) * Docs: translate date-picker.md into french (fr-FR) * Docs: translate datetime-picker.md into french (fr-FR) * Docs: translate dialog.md into french (fr-FR) * Docs: translate form.md into french (fr-FR) * Docs: translate i18n.md into french (fr-FR) * Docs: translate icon.md into french (fr-FR) * Docs: translate input-number.md into french (fr-FR) * Docs: translate input.md into french (fr-FR) * Docs: translate installation.md into french (fr-FR) * Docs: translate dropdown.md into french (fr-FR) * Docs: translate layout.md into french (fr-FR) * Docs: translate loading.md into french (fr-FR) * Docs: translate menu.md into french (fr-FR) * Docs: translate message-box.md into french (fr-FR) * Docs: translate message.md into french (fr-FR) * Docs: translate notification.md into french (fr-FR) * Docs: translate pagination.md into french (fr-FR) * Docs: translate popover.md into french (fr-FR) * Docs: translate progress.md into french (fr-FR) * Docs: translate quickstart.md into french (fr-FR) * Docs: translate radio.md into french (fr-FR) * Docs: translate rate.md into french (fr-FR) * Docs: translate select.md into french (fr-FR) * Docs: translate slider.md into french (fr-FR) * Docs: translate steps.md into french (fr-FR) * Docs: translate switch.md into french (fr-FR) * Docs: translate table.md into french (fr-FR) * Docs: translate tabs.md into french (fr-FR) * Docs: translate tag.md into french (fr-FR) * Docs: translate time-picker.md into french (fr-FR) * Docs: translate tooltip.md into french (fr-FR) * Docs: translate transfer.md into french (fr-FR) * Docs: translate transition.md into french (fr-FR) * Docs: translate tree.md into french (fr-FR) * Docs: translate typography.md into french (fr-FR) * Docs: translate upload.md into french (fr-FR) * Docs: update the configuration for the french translation * Docs: update the french documentation from 2.4.4 to 2.4.11 * Changelog: translate to line 408 into french (fr-FR) * Changelog: finish the translation into french (fr-FR) * Changelog: update from 2.4.11 to 2.5.4 * Doc: update french translation from 2.4.11 to 2.5.4 * Changelog: fix a display bug with the subtitles * Examples: add french language (fr-FR) in search.vue component * Doc: change some french titles * Doc: add the french locale to app.vue
2019-02-12 01:08:19 +00:00
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
}
}
</script>
```
:::
### Service
Vous pouvez invoquer Loading comme un service. Importez le service Loading:
```javascript
import { Loading } from 'element-ui';
```
Et invoquer-le:
```javascript
Loading.service(options);
```
Le paramètre `options` correspond à la configuration de Loading (voir table suivante). `LoadingService` retourne une instance de Loading, que vous pouvez fermer en appelant la méthode `close`:
```javascript
let loadingInstance = Loading.service(options);
this.$nextTick(() => { // Loading should be closed asynchronously
loadingInstance.close();
});
```
Notez que dans ce cas le Loading plein écran est un singleton. Si un nouveau Loading plein écran est invoqué avant la fermeture du précédent, celui-ci sera retourné au lieu d'en créer un nouveau:
```javascript
let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true
```
Appeler la méthode `close` sur n'importe lequel des deux fermera le Loading.
Si Element est importé en entier, une méthode globale `$loading` sera ajoutée à Vue.prototype. Vous pourrez l'invoquer comme ceci: `this.$loading(options)` et elle retournera une instance Loading.
### Options
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| target | L'élément du DOM a couvrir. Accepte un objet DOM ou un string. Si c'est un string, il sera passé à `document.querySelector` Pour avoir l'élément du DOM correspondant. | object/string | — | document.body |
| body | Identique au modificateur `body` de `v-loading`. | boolean | — | false |
| fullscreen | Identique au modificateur `fullscreen` de `v-loading`. | boolean | — | true |
| lock | Identique au modificateur `lock` de `v-loading`. | boolean | — | false |
| text | Texte a afficher sous le spinner. | string | — | — |
| spinner | Classe du spinner. | string | — | — |
| background | Couleur de fond du masque. | string | — | — |
| customClass | Classe du Loading. | string | — | — |