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