mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-27 02:01:15 +08:00
c9895f8c24
* feat(components): [progress] support set striped progress bar * docs(components): [progress] add `striped` attribute * refactor(components): [progress] update striped prop and `bg-size` style * feat(components): [progress] add `striped-flow` attribute use `striped-flow` to get the stripes to flow * docs(components): [progress] add `striped-flow` attribute add `striped-flow` attribute update `duration` attribute description * docs(components): [progress] refactor `striped-progress` example * refactor(theme-chalk): [progress] refactor striped flow animation
61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<div class="demo-progress">
|
|
<el-progress :percentage="50" :stroke-width="15" striped />
|
|
<el-progress
|
|
:percentage="30"
|
|
:stroke-width="15"
|
|
status="warning"
|
|
striped
|
|
striped-flow
|
|
/>
|
|
<el-progress
|
|
:percentage="100"
|
|
:stroke-width="15"
|
|
status="success"
|
|
striped
|
|
striped-flow
|
|
:duration="10"
|
|
/>
|
|
<el-progress
|
|
:percentage="percentage"
|
|
:stroke-width="15"
|
|
status="exception"
|
|
striped
|
|
striped-flow
|
|
:duration="duration"
|
|
/>
|
|
<el-button-group>
|
|
<el-button :icon="Minus" @click="decrease" />
|
|
<el-button :icon="Plus" @click="increase" />
|
|
</el-button-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue'
|
|
import { Minus, Plus } from '@element-plus/icons-vue'
|
|
|
|
const percentage = ref<number>(70)
|
|
const duration = computed(() => Math.floor(percentage.value / 10))
|
|
|
|
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;
|
|
width: 350px;
|
|
}
|
|
</style>
|