mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 11:17:46 +08:00
ade87f6729
* docs: standardize unified example code format and fix some example type * docs: update some example type * Update docs/examples/descriptions/sizes.vue Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * docs: update example-page-header * docs: update example-page-header --------- Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
<template>
|
|
<div class="demo-progress">
|
|
<el-progress :percentage="percentage" :color="customColor" />
|
|
|
|
<el-progress :percentage="percentage" :color="customColorMethod" />
|
|
|
|
<el-progress :percentage="percentage" :color="customColors" />
|
|
<el-progress :percentage="percentage" :color="customColors" />
|
|
<div>
|
|
<el-button-group>
|
|
<el-button :icon="Minus" @click="decrease" />
|
|
<el-button :icon="Plus" @click="increase" />
|
|
</el-button-group>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { Minus, Plus } from '@element-plus/icons-vue'
|
|
|
|
const percentage = ref(20)
|
|
const customColor = ref('#409eff')
|
|
|
|
const customColors = [
|
|
{ color: '#f56c6c', percentage: 20 },
|
|
{ color: '#e6a23c', percentage: 40 },
|
|
{ color: '#5cb87a', percentage: 60 },
|
|
{ color: '#1989fa', percentage: 80 },
|
|
{ color: '#6f7ad3', percentage: 100 },
|
|
]
|
|
|
|
const customColorMethod = (percentage: number) => {
|
|
if (percentage < 30) {
|
|
return '#909399'
|
|
}
|
|
if (percentage < 70) {
|
|
return '#e6a23c'
|
|
}
|
|
return '#67c23a'
|
|
}
|
|
const increase = () => {
|
|
percentage.value += 10
|
|
if (percentage.value > 100) {
|
|
percentage.value = 100
|
|
}
|
|
}
|
|
const decrease = () => {
|
|
percentage.value -= 10
|
|
if (percentage.value < 0) {
|
|
percentage.value = 0
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo-progress .el-progress--line {
|
|
margin-bottom: 15px;
|
|
max-width: 600px;
|
|
}
|
|
</style>
|