Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | 7x 7x 7x 7x 7x | <template>
<div :class="$style.root" :size="size">
<svg :class="$style.svg" :viewBox="`0 0 ${width} ${width}`">
<g :transform="`translate(${width / 2}, ${width / 2}) rotate(-90)`">
<circle :class="$style.track" cx="0" cy="0" :r="radius" />
<circle :class="$style.trail" cx="0" cy="0" :r="radius" :style="{ strokeDasharray }" stroke-linecap="round" />
</g>
</svg>
<div :class="$style.text" vusion-slot-name="default">
<div :class="$style.percent" vusion-slot-name="percent">
<slot name="percent">
<s-empty v-if="!$slots.percent && $env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']"></s-empty>
<template v-else-if="!showPercentSlot">{{ percent + '%' }}</template>
</slot>
</div>
<slot>{{ content }}</slot>
</div>
<div :class="$style.foot">
<slot name="foot">
<slot name="title">{{ title }}</slot>
</slot>
</div>
</div>
</template>
<script>
import SEmpty from '../s-empty.vue';
export default {
name: 'u-circular-progress',
components: {
SEmpty,
},
props: {
percent: { type: Number, default: 0 },
title: String,
content: String,
size: String,
showPercentSlot: { type: Boolean, default: false },
},
data() {
return {
width: 90,
radius: 66,
};
},
computed: {
strokeDasharray() {
return (
2 * Math.PI * this.radius * (Number(this.percent) || 0) * 0.01 + 'px 1000px'
);
},
},
watch: {
size(value) {
this.setSvgParams(value);
},
},
created() {
this.setSvgParams(this.size);
},
methods: {
setSvgParams(value) {
const SIZE_MAP = {
default: { width: 90, border: 6 },
normal: { width: 90, border: 6 },
small: { width: 74, border: 5 },
large: { width: 112, border: 8 },
huge: { width: 142, border: 10 },
};
const size = SIZE_MAP[value] || SIZE_MAP.default;
this.width = size.width;
this.radius = (size.width - size.border) / 2;
},
},
};
</script>
<style module>
.root {
display: inline-block;
position: relative;
width: var(--circular-progress-size);
height: var(--circular-progress-size);
}
.root[size="small"] {
width: var(--circular-progress-size-small);
height: var(--circular-progress-size-small);
}
.root[size="large"] {
width: var(--circular-progress-size-large);
height: var(--circular-progress-size-large);
}
.root[size="huge"] {
width: var(--circular-progress-size-huge);
height: var(--circular-progress-size-huge);
}
.svg {
width: 100%;
height: 100%;
}
.track {
fill: none;
stroke-width: var(--circular-progress-stroke-width);
stroke: var(--circular-progress-track-stroke);
}
.trail {
fill: none;
stroke-width: var(--circular-progress-stroke-width);
stroke: var(--circular-progress-trail-stroke);
transition: var(--circular-progress-trail-transition);
}
.text {
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: var(--circular-progress-font-size);
color: var(--circular-progress-text-color);
}
.percent {
font-size: var(--circular-progress-percent-font-size);
font-weight: var(--circular-progress-percent-font-weight);
color: var(--circular-progress-percent-color);
/* line-height: 30px; */
}
.foot {
text-align: center;
color: var(--color-light);
font-size: 14px;
}
.root[size="small"] .track,
.root[size="small"] .trail {
stroke-width: var(--circular-progress-stroke-width-small);
}
.root[size="small"] .percent {
font-size: var(--circular-progress-percent-font-size-small);
}
.root[size="large"] .track,
.root[size="large"] .trail {
stroke-width: var(--circular-progress-stroke-width-large);
}
.root[size="large"] .percent {
font-size: var(--circular-progress-percent-font-size-large);
}
.root[size="huge"] .track,
.root[size="huge"] .trail {
stroke-width: var(--circular-progress-stroke-width-huge);
}
.root[size="huge"] .percent {
font-size: var(--circular-progress-percent-font-size-huge);
}
</style>
|