Skip to content

fpi-el-grid-progress-bar 分隔进度条组件 0.8.1

TIP

当前组件在 element-plus-expand 0.8.1 版本后正式部署

基础演示

设置 value 为 0~100 之间的数字就可以显示进度条组件的进度,设置选中的颜色 check-color, 和盒子的颜色 default-box-back

<!--
 * @Author: mjh
 * @Date: 2023-07-25 20:06:52
 * @LastEditors: mjh
 * @LastEditTime: 2023-07-25 20:44:57
 * @Description:
-->
<template>
    <div style="width: 100%;height: 10px;">
        <FpiElGridProgressBar
            :value="55.7"
            check-color="#F84439"
            default-box-back="rgba(0, 0, 0, 0.1)"
        />
    </div>
</template>

<script setup lang="ts">
import { FpiElGridProgressBar } from '@element-plus-expand/components'
</script>

显示代码

分隔进度

设置 grid-mid 可以让本来连贯的进度变成分隔开来,设置 grid-width 的宽度可以设置每一个小格子的宽或者高。

<template>
    <div style="width: 100%;height: 10px;">
        <FpiElGridProgressBar
            :value="55.7"
            check-color="#F84439"
            background-color="rgba(0, 0, 0, 0.1)"
            :grid-width="2"
            :grid-mid="1"
        />
    </div>
</template>

<script setup lang="ts">
import { FpiElGridProgressBar } from '@element-plus-expand/components'
</script>

显示代码

倾斜进度条

设置 grid-rotate 倾斜角度可以实现斜着的分隔。

<template>
    <div style="width: 100%;height: 10px;">
        <FpiElGridProgressBar
            :value="55.7"
            :grid-rotate="25"
            :grid-width="2"
            :grid-mid="1"
            check-color="#F84439"
        />
    </div>
</template>

<script setup lang="ts">
import { FpiElGridProgressBar } from '@element-plus-expand/components'
</script>

显示代码

竖直分隔进度条

设置 base-liney 实现竖着的进度条。

<template>
    <div style="width: 20px;height: 200px;margin: 0 auto;">
        <FpiElGridProgressBar
            :value="75.7"
            :grid-width="2"
            :grid-rotate="25"
            :grid-mid="1"
            base-line="y"
            check-color="#F84439"
        />
    </div>
</template>

<script setup lang="ts">
import { FpiElGridProgressBar } from '@element-plus-expand/components'
</script>

显示代码

渐变色进度条

当设置分隔进度条时,还想实现进度条的渐变色可以设置 linearStartColorlinearEndColor。 只支持16位颜色编码,不支持 rgb 形式。

<template>
    <div style="width: 100%;height: 10px;">
        <FpiElGridProgressBar
            :value="55.7"
            check-color="#F84439"
            default-box-back="rgba(0, 0, 0, 0.1)"
            check-box-back="rgba(0, 0, 0, 0.1)"
            :grid-rotate="25"
            :grid-width="3"
            linear-start-color="#06F7A1"
            linear-end-color="#00DDFF"
            :grid-mid="2"
        />
    </div>
</template>

<script setup lang="ts">
import { FpiElGridProgressBar } from '@element-plus-expand/components'
</script>

显示代码

属性

参数说明类型可选值默认值
value0~100之间的数字numbernumber0
checkColor选中格子的颜色stringstring-
checkBoxBack选中区域的颜色stringstring-
defaultColor不选中格子的颜色stringstring-
defaultBoxBack未选择区域的颜色stringstring-
gridStyle格子的样式ObjectObject{}
gridWidth格子的宽度NumberNumber1
gridMid格子间隔NumberNumber0
backgroundColor整个背景色stringstring-
baseLine表格进度条是横向的还是竖的'y' / 'x''y' / 'x''x'
gridRotate格子倾斜角度NumberNumber0
linearStartColor渐变开始颜色 (不支持透明度的颜色)stringstring''
linearEndColor渐变结束颜色 (不支持透明度的颜色)stringstring''

贡献者:

水产品-马佳辉

fpi-component