Appearance
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 | '' |