fpi-componentAppearance
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-line 为 y 实现竖着的进度条。
<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>
显示代码
渐变色进度条
当设置分隔进度条时，还想实现进度条的渐变色可以设置 linearStartColor 和 linearEndColor。 只支持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>
显示代码
属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 0~100之间的数字 | number | number | 0 |
| checkColor | 选中格子的颜色 | string | string | - |
| checkBoxBack | 选中区域的颜色 | string | string | - |
| defaultColor | 不选中格子的颜色 | string | string | - |
| defaultBoxBack | 未选择区域的颜色 | string | string | - |
| gridStyle | 格子的样式 | Object | Object | {} |
| gridWidth | 格子的宽度 | Number | Number | 1 |
| gridMid | 格子间隔 | Number | Number | 0 |
| backgroundColor | 整个背景色 | string | string | - |
| baseLine | 表格进度条是横向的还是竖的 | 'y' / 'x' | 'y' / 'x' | 'x' |
| gridRotate | 格子倾斜角度 | Number | Number | 0 |
| linearStartColor | 渐变开始颜色 (不支持透明度的颜色) | string | string | '' |
| linearEndColor | 渐变结束颜色 (不支持透明度的颜色) | string | string | '' |
贡献者：
水产品-马佳辉