✨(component): 完善Progress组件 环形模式,新增circleSize和circleWidth两个属性来控制环形进度条尺寸和线条宽度
重新用SVG实现环形进度条,并在@Sight的建议下兼容了SVG夜间模式
This commit is contained in:
0o张不歪o0
parent
8c519fa66c
commit
c8d02931ce
@ -43,17 +43,10 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.lay-progress-circle,
|
||||
.lay-progress-circle-bg {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
.lay-progress-circle{
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
-webkit-mask: radial-gradient(transparent 69px, #000 45px);
|
||||
}
|
||||
|
||||
.lay-progress-circle-bg {
|
||||
background-color: var(--global-neutral-color-3);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.lay-progress-circle__text {
|
||||
@ -63,11 +56,3 @@
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.lay-progress-circle-corner {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
top: 72px;
|
||||
left: 72px;
|
||||
}
|
||||
|
||||
@ -16,9 +16,15 @@ export interface LayProgressProps {
|
||||
showText?: boolean;
|
||||
text?: string;
|
||||
circle?: boolean;
|
||||
circleSize?: number;
|
||||
circleWidth?: number;
|
||||
}
|
||||
|
||||
const props = defineProps<LayProgressProps>();
|
||||
const props = withDefaults(defineProps<LayProgressProps>(), {
|
||||
circle: false,
|
||||
circleSize: 150,
|
||||
circleWidth: 6,
|
||||
});
|
||||
|
||||
const styles = computed(() => {
|
||||
return [
|
||||
@ -70,44 +76,59 @@ const getCircleRotate = computed(() => {
|
||||
}
|
||||
return (percent / 100) * 360;
|
||||
});
|
||||
|
||||
const getStrokeDasharray = computed(() => {
|
||||
let percent;
|
||||
if (typeof props.percent == "string") {
|
||||
percent = parseInt(props.percent);
|
||||
} else {
|
||||
percent = props.percent;
|
||||
}
|
||||
let radii = props.circleSize / 2 - props.circleWidth / 2;
|
||||
let perimeter = Math.PI * 2 * radii;
|
||||
return `${(percent / 100) * perimeter}px ${perimeter}px`;
|
||||
});
|
||||
|
||||
const getPathD = computed(() => {
|
||||
let circleSize = props.circleSize;
|
||||
let circleWidth = props.circleWidth;
|
||||
return `M ${circleSize / 2} ${circleSize / 2} m 0, -${
|
||||
(circleSize - circleWidth) / 2
|
||||
} a ${(circleSize - circleWidth) / 2}, ${
|
||||
(circleSize - circleWidth) / 2
|
||||
} 0 1, 1 0, ${circleSize - circleWidth} a ${
|
||||
(circleSize - circleWidth) / 2
|
||||
}, ${(circleSize - circleWidth) / 2} 0 1, 1 0, -${circleSize - circleWidth}`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="circle">
|
||||
<div class="lay-progress-circle-container">
|
||||
<div class="lay-progress-circle-bg">
|
||||
<div
|
||||
class="lay-progress-circle"
|
||||
:style="{
|
||||
background: `conic-gradient(${getCircleColor} 0, ${getCircleColor} ${props.percent}%, transparent ${percent}%, transparent)`,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div style="position: absolute; top: 0; left: 0">
|
||||
<div
|
||||
class="lay-progress-circle-corner"
|
||||
:style="{
|
||||
backgroundColor: getCircleColor,
|
||||
transform: `translate(0, -72px)`,
|
||||
}"
|
||||
></div>
|
||||
<div
|
||||
class="lay-progress-circle-corner"
|
||||
:style="{
|
||||
backgroundColor: getCircleColor,
|
||||
transform: `rotate(${getCircleRotate}deg) translate(0, -72px)`,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="layui-progress-text lay-progress-circle__text"
|
||||
v-if="showText"
|
||||
>
|
||||
{{ text ? text : percent + "%" }}
|
||||
</div>
|
||||
<div class="lay-progress-circle" v-if="circle">
|
||||
<svg
|
||||
:viewBox="`0 0 ${circleSize} ${circleSize}`"
|
||||
:width="circleSize"
|
||||
:height="circleSize"
|
||||
>
|
||||
<path
|
||||
:d="getPathD"
|
||||
style="fill: none; stroke: var(--global-neutral-color-3)"
|
||||
:style="{ strokeWidth: `${circleWidth}px` }"
|
||||
></path>
|
||||
<path
|
||||
:d="getPathD"
|
||||
style="fill: none; stroke-linecap: round"
|
||||
:style="{
|
||||
strokeDasharray: getStrokeDasharray,
|
||||
stroke: getCircleColor,
|
||||
strokeWidth: `${circleWidth}px`,
|
||||
}"
|
||||
></path>
|
||||
</svg>
|
||||
<div class="layui-progress-text lay-progress-circle__text" v-if="showText">
|
||||
{{ text ? text : percent + "%" }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="layui-progress" :class="'layui-progress-' + size" v-else>
|
||||
<div
|
||||
class="layui-progress-bar"
|
||||
|
||||
@ -58,7 +58,7 @@ const changeTheme = (theme: string) => {
|
||||
|
||||
const defaultFixes: DynamicThemeFix = {
|
||||
css: "",
|
||||
invert: [],
|
||||
invert: ['.lay-progress-circle svg'],
|
||||
ignoreImageAnalysis: [],
|
||||
disableStyleSheetsProxy: false,
|
||||
ignoreInlineStyle: ignoreInlineStyle,
|
||||
|
||||
@ -124,9 +124,10 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-progress percent="70" circle :show-text="showText" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="60" circle :show-text="showText" text="销售量" theme="red" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="30" circle :show-text="showText" theme="blue"></lay-progress>
|
||||
<lay-progress percent="10" circle :show-text="showText" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="20" circle :show-text="showText" text="销售量" theme="red" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="30" circle :show-text="showText" theme="blue" text="不同尺寸" circleSize="200" circleWidth="20" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="70" circle :show-text="showText" text="宽度控制" theme="orange" circleSize="200" circleWidth="40"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -158,8 +159,9 @@ export default {
|
||||
| text | 提示 | -- |
|
||||
| color | 颜色 | -- |
|
||||
| showText | 展示描述 | -- |
|
||||
|circle | 环形进度条| 默认为 `false` |
|
||||
|
||||
| circle | 环形进度条| 默认为 `false` |
|
||||
| circleSize| 环形进度条尺寸| 默认为 `150` 单位是px |
|
||||
| circleWidth| 环形进度条线条宽度| 默认为 `6` 单位是px |
|
||||
:::
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user