init

uni_modules/nutui-uni/components/progress/progress.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, defineComponent, useSlots } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import NutIcon from '../icon/icon.vue'
+import { progressProps } from './progress'
+
+const props = defineProps(progressProps)
+
+const slotDefault = !!useSlots().default
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+const height = computed(() => {
+  if (props.strokeWidth)
+    return `${props.strokeWidth}px`
+
+  return undefined
+})
+const percentage = computed(() => {
+  return Number(props.percentage) >= 100 ? 100 : Number(props.percentage)
+})
+const bgStyle = computed(() => {
+  return {
+    width: `${percentage.value}%`,
+    background: props.strokeColor || '',
+  }
+})
+const textStyle = computed(() => {
+  return {
+    color: props.textColor || '',
+  }
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-progress`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <div :class="classes" :style="customStyle">
+    <div
+      class="nut-progress-outer"
+      :class="[showText && !textInside ? 'nut-progress-outer-part' : '', size ? `nut-progress-${size}` : '']"
+      :style="{ height }"
+    >
+      <div class="nut-progress-inner" :class="[status === 'active' ? 'nut-active' : '']" :style="bgStyle" />
+      <div
+        v-if="showText && textInside && !slotDefault"
+        class="nut-progress-text nut-progress-insidetext"
+        :style="{
+          lineHeight: height,
+          left: `${percentage}%`,
+          transform: `translate(-${+percentage}%,-50%)`,
+          background: textBackground || strokeColor,
+        }"
+      >
+        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
+      </div>
+      <div
+        v-if="showText && textInside && slotDefault"
+        class="nut-progress-slot"
+        :style="{
+          position: `absolute`,
+          top: `50%`,
+          left: `${percentage}%`,
+          transform: `translate(-${+percentage}%,-50%)`,
+        }"
+      >
+        <slot />
+      </div>
+    </div>
+    <div v-if="showText && !textInside" class="nut-progress-text" :style="{ lineHeight: height }">
+      <template v-if="status === 'text' || status === 'active'">
+        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
+      </template>
+      <template v-else-if="status === 'icon'">
+        <slot name="iconName">
+          <NutIcon
+            name="checked"
+            width="15px"
+            height="15px"
+            custom-color="#439422"
+          />
+        </slot>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>