|
|
@@ -6,32 +6,31 @@
|
|
|
:class="[showText && !textInside ? 'nut-progress-outer-part' : '', size ? 'nut-progress-' + size : '']"
|
|
|
:style="{ height: height }"
|
|
|
>
|
|
|
- <div :class="['nut-progress-inner', status == 'active' ? 'nut-active' : '']" :style="bgStyle">
|
|
|
- <div
|
|
|
- class="nut-progress-text nut-progress-insidetext"
|
|
|
- ref="insideText"
|
|
|
- :style="{
|
|
|
- lineHeight: height,
|
|
|
- left: `${percentage}%`,
|
|
|
- transform: `translate(-${+percentage}%,-50%)`,
|
|
|
- background: textBackground || strokeColor
|
|
|
- }"
|
|
|
- v-if="showText && textInside && !slotDefault"
|
|
|
- >
|
|
|
- <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- ref="insideText"
|
|
|
- :style="{
|
|
|
- position: `absolute`,
|
|
|
- top: `50%`,
|
|
|
- left: `${percentage}%`,
|
|
|
- transform: `translate(-${+percentage}%,-50%)`
|
|
|
- }"
|
|
|
- v-if="showText && textInside && slotDefault"
|
|
|
- >
|
|
|
- <slot></slot>
|
|
|
- </div>
|
|
|
+ <div :class="['nut-progress-inner', status == 'active' ? 'nut-active' : '']" :style="bgStyle"></div>
|
|
|
+ <div
|
|
|
+ class="nut-progress-text nut-progress-insidetext"
|
|
|
+ ref="insideText"
|
|
|
+ :style="{
|
|
|
+ lineHeight: height,
|
|
|
+ left: `${percentage}%`,
|
|
|
+ transform: `translate(-${+percentage}%,-50%)`,
|
|
|
+ background: textBackground || strokeColor
|
|
|
+ }"
|
|
|
+ v-if="showText && textInside && !slotDefault"
|
|
|
+ >
|
|
|
+ <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ ref="insideText"
|
|
|
+ :style="{
|
|
|
+ position: `absolute`,
|
|
|
+ top: `50%`,
|
|
|
+ left: `${percentage}%`,
|
|
|
+ transform: `translate(-${+percentage}%,-50%)`
|
|
|
+ }"
|
|
|
+ v-if="showText && textInside && slotDefault"
|
|
|
+ >
|
|
|
+ <slot></slot>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="nut-progress-text" v-if="showText && !textInside">
|