test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 20:27:44 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(docs): Loading code for composition (#2196)

Browse Source 
* feat(docs): Loading code for composition

* feat(docs): Loading code for ElLoading

Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
Xing.Wu 2021-06-10 23:55:09 +08:00 committed by GitHub
parent 26fc4e15be
commit 90bc266491
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 540 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
website/docs/en-US/loading.md
View File

@ -59,6 +59,41 @@ Displays animation in a container (such as a table) while loading data.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -115,6 +150,41 @@ You can customize loading text, loading spinner and background color.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -167,6 +237,44 @@ Show a full screen animation while loading data.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElLoading } from 'element-plus';
export default defineComponent({
setup() {
const fullscreenLoading = ref(false);
const openFullScreen1 = () => {
fullscreenLoading.value = true;
setTimeout(() => {
fullscreenLoading.value = false;
}, 2000);
};
const openFullScreen2 = () => {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
});
setTimeout(() => {
loading.close();
}, 2000);
};
return {
fullscreenLoading,
openFullScreen1,
openFullScreen2,
};
},
});
</setup>
-->
```
:::

108
website/docs/es/loading.md
View File

@ -59,6 +59,41 @@ Muestra una animación en un contenedor (como en una tabla) mientras se cargan l
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -115,6 +150,41 @@ Puede personalizar el texto de carga, spinner de carga y color de fondo.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -167,6 +237,44 @@ Muestra una animación de pantalla completa mientras se cargan los datos
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElLoading } from 'element-plus';
export default defineComponent({
setup() {
const fullscreenLoading = ref(false);
const openFullScreen1 = () => {
fullscreenLoading.value = true;
setTimeout(() => {
fullscreenLoading.value = false;
}, 2000);
};
const openFullScreen2 = () => {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
});
setTimeout(() => {
loading.close();
}, 2000);
};
return {
fullscreenLoading,
openFullScreen1,
openFullScreen2,
};
},
});
</setup>
-->
```
:::

108
website/docs/fr-FR/loading.md
View File

@ -59,6 +59,41 @@ Affiche une animation dans un conteneur (Comme un tableau par exemple) pendant l
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -115,6 +150,41 @@ Vous pouvez personnaliser le texte, le spinner et la couleur de fond.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -167,6 +237,44 @@ Affichez une animation en plein écran quand vous charger des données.
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElLoading } from 'element-plus';
export default defineComponent({
setup() {
const fullscreenLoading = ref(false);
const openFullScreen1 = () => {
fullscreenLoading.value = true;
setTimeout(() => {
fullscreenLoading.value = false;
}, 2000);
};
const openFullScreen2 = () => {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
});
setTimeout(() => {
loading.close();
}, 2000);
};
return {
fullscreenLoading,
openFullScreen1,
openFullScreen2,
};
},
});
</setup>
-->
```
:::

108
website/docs/jp/loading.md
View File

@ -59,6 +59,41 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -115,6 +150,41 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -167,6 +237,44 @@
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElLoading } from 'element-plus';
export default defineComponent({
setup() {
const fullscreenLoading = ref(false);
const openFullScreen1 = () => {
fullscreenLoading.value = true;
setTimeout(() => {
fullscreenLoading.value = false;
}, 2000);
};
const openFullScreen2 = () => {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
});
setTimeout(() => {
loading.close();
}, 2000);
};
return {
fullscreenLoading,
openFullScreen1,
openFullScreen2,
};
},
});
</setup>
-->
```
:::

108
website/docs/zh-CN/loading.md
View File

@ -58,6 +58,41 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
tableData: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
],
loading: true,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -114,6 +149,41 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
tableData: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
],
loading: true,
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -166,6 +236,44 @@
}
}
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
import { ElLoading } from 'element-plus';
export default defineComponent({
setup() {
const fullscreenLoading = ref(false);
const openFullScreen1 = () => {
fullscreenLoading.value = true;
setTimeout(() => {
fullscreenLoading.value = false;
}, 2000);
};
const openFullScreen2 = () => {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
});
setTimeout(() => {
loading.close();
}, 2000);
};
return {
fullscreenLoading,
openFullScreen1,
openFullScreen2,
};
},
});
</setup>
-->
```
:::