javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): Progress code for composition (#2333)

Browse Source 
Co-authored-by: xing.wu <wuxing@bjca.org.cn>
This commit is contained in:
Xing.Wu
2021-06-25 16:08:09 +08:00
committed by GitHub
parent 5c4a3cb27b
commit d17473867c
5 changed files with 630 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
website/docs/en-US/progress.md
View File

@@ -21,6 +21,22 @@ Progress is used to show the progress of current operation, and inform the user
}
};
</script>
<!--
<setup>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
return {
format,
};
},
});
</setup>
-->
```
:::
@@ -103,6 +119,55 @@ You can use `color` attr to set the progress bar color. it accepts color string,
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
percentage: 20,
customColor: '#409eff',
customColors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
],
});
const customColorMethod = (percentage) => {
if (percentage < 30) {
return '#909399';
} if (percentage < 70) {
return '#e6a23c';
}
return '#67c23a';
};
const increase = () => {
state.percentage += 10;
if (state.percentage > 100) {
state.percentage = 100;
}
};
const decrease = () => {
state.percentage -= 10;
if (state.percentage < 0) {
state.percentage = 0;
}
};
return {
...toRefs(state),
customColorMethod,
increase,
decrease,
};
},
});
</setup>
-->
```
:::
@@ -170,6 +235,51 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
percentage: 10,
percentage2: 0,
colors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
],
});
const increase = () => {
state.percentage += 10;
if (state.percentage > 100) {
state.percentage = 100;
}
};
const decrease = () => {
state.percentage -= 10;
if (state.percentage < 0) {
state.percentage = 0;
}
};
onMounted(() => {
setInterval(() => {
state.percentage2 = (state.percentage2 % 100) + 10
}, 500)
});
return {
...toRefs(state),
increase,
decrease,
};
},
});
</setup>
-->
```
:::
@@ -216,6 +326,22 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
}
};
</script>
<!--
<setup>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
return {
format,
};
},
});
</setup>
-->
```
:::

126
website/docs/es/progress.md
View File

@@ -21,6 +21,22 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
}
};
</script>
<!--
<setup>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
return {
format,
};
},
});
</setup>
-->
```
:::
@@ -102,6 +118,55 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
percentage: 20,
customColor: '#409eff',
customColors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
],
});
const customColorMethod = (percentage) => {
if (percentage < 30) {
return '#909399';
} if (percentage < 70) {
return '#e6a23c';
}
return '#67c23a';
};
const increase = () => {
state.percentage += 10;
if (state.percentage > 100) {
state.percentage = 100;
}
};
const decrease = () => {
state.percentage -= 10;
if (state.percentage < 0) {
state.percentage = 0;
}
};
return {
...toRefs(state),
customColorMethod,
increase,
decrease,
};
},
});
</setup>
-->
```
:::
@@ -168,6 +233,51 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
percentage: 10,
percentage2: 0,
colors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
],
});
const increase = () => {
state.percentage += 10;
if (state.percentage > 100) {
state.percentage = 100;
}
};
const decrease = () => {
state.percentage -= 10;
if (state.percentage < 0) {
state.percentage = 0;
}
};
onMounted(() => {
setInterval(() => {
state.percentage2 = (state.percentage2 % 100) + 10
}, 500)
});
return {
...toRefs(state),
increase,
decrease,
};
},
});
</setup>
-->
```
:::
@@ -214,6 +324,22 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
}
};
</script>
<!--
<setup>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
return {
format,
};
},
});
</setup>
-->
```
:::

126
website/docs/fr-FR/progress.md
View File

@@ -21,6 +21,22 @@ Progress est utilisé pour afficher la progression d'une opération et informer
}
};
</script>
<!--
<setup>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
return {
format,
};
},
});
</setup>
-->
```
:::
@@ -103,6 +119,55 @@ Vous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
percentage: 20,
customColor: '#409eff',
customColors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
],
});
const customColorMethod = (percentage) => {
if (percentage < 30) {
return '#909399';
} if (percentage < 70) {
return '#e6a23c';
}
return '#67c23a';
};
const increase = () => {
state.percentage += 10;
if (state.percentage > 100) {
state.percentage = 100;
}
};
const decrease = () => {
state.percentage -= 10;
if (state.percentage < 0) {
state.percentage = 0;
}
};
return {
...toRefs(state),
customColorMethod,
increase,
decrease,
};
},
});
</setup>
-->
```
:::
@@ -170,6 +235,51 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
percentage: 10,
percentage2: 0,
colors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
],
});
const increase = () => {
state.percentage += 10;
if (state.percentage > 100) {
state.percentage = 100;
}
};
const decrease = () => {
state.percentage -= 10;
if (state.percentage < 0) {
state.percentage = 0;
}
};
onMounted(() => {
setInterval(() => {
state.percentage2 = (state.percentage2 % 100) + 10
}, 500)
});
return {
...toRefs(state),
increase,
decrease,
};
},
});
</setup>
-->
```
:::
@@ -216,6 +326,22 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
}
};
</script>
<!--
<setup>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
return {
format,
};
},
});
</setup>
-->
```
:::

126
website/docs/jp/progress.md
View File

@@ -21,6 +21,22 @@
}
};
</script>
<!--
<setup>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
return {
format,
};
},
});
</setup>
-->
```
:::
@@ -103,6 +119,55 @@
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
percentage: 20,
customColor: '#409eff',
customColors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
],
});
const customColorMethod = (percentage) => {
if (percentage < 30) {
return '#909399';
} if (percentage < 70) {
return '#e6a23c';
}
return '#67c23a';
};
const increase = () => {
state.percentage += 10;
if (state.percentage > 100) {
state.percentage = 100;
}
};
const decrease = () => {
state.percentage -= 10;
if (state.percentage < 0) {
state.percentage = 0;
}
};
return {
...toRefs(state),
customColorMethod,
increase,
decrease,
};
},
});
</setup>
-->
```
:::
@@ -170,6 +235,51 @@
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
percentage: 10,
percentage2: 0,
colors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
],
});
const increase = () => {
state.percentage += 10;
if (state.percentage > 100) {
state.percentage = 100;
}
};
const decrease = () => {
state.percentage -= 10;
if (state.percentage < 0) {
state.percentage = 0;
}
};
onMounted(() => {
setInterval(() => {
state.percentage2 = (state.percentage2 % 100) + 10
}, 500)
});
return {
...toRefs(state),
increase,
decrease,
};
},
});
</setup>
-->
```
:::
@@ -216,6 +326,22 @@
}
};
</script>
<!--
<setup>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
return {
format,
};
},
});
</setup>
-->
```
:::

126
website/docs/zh-CN/progress.md
View File

@@ -22,6 +22,22 @@
}
};
</script>
<!--
<setup>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const format = (percentage) => (percentage === 100 ? '满' : `${percentage}%`);
return {
format,
};
},
});
</setup>
-->
```
:::
@@ -108,6 +124,55 @@
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
percentage: 20,
customColor: '#409eff',
customColors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
],
});
const customColorMethod = (percentage) => {
if (percentage < 30) {
return '#909399';
} if (percentage < 70) {
return '#e6a23c';
}
return '#67c23a';
};
const increase = () => {
state.percentage += 10;
if (state.percentage > 100) {
state.percentage = 100;
}
};
const decrease = () => {
state.percentage -= 10;
if (state.percentage < 0) {
state.percentage = 0;
}
};
return {
...toRefs(state),
customColorMethod,
increase,
decrease,
};
},
});
</setup>
-->
```
:::
@@ -178,6 +243,51 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
}
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
percentage: 10,
percentage2: 0,
colors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
],
});
const increase = () => {
state.percentage += 10;
if (state.percentage > 100) {
state.percentage = 100;
}
};
const decrease = () => {
state.percentage -= 10;
if (state.percentage < 0) {
state.percentage = 0;
}
};
onMounted(() => {
setInterval(() => {
state.percentage2 = (state.percentage2 % 100) + 10
}, 500)
});
return {
...toRefs(state),
increase,
decrease,
};
},
});
</setup>
-->
```
:::
@@ -226,6 +336,22 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
}
};
</script>
<!--
<setup>
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const format = (percentage) => (percentage === 100 ? '满' : `${percentage}%`);
return {
format,
};
},
});
</setup>
-->
```
:::