feat(progress): 新增ProgressStatus类型导出

xiaohe0601 · xiaohe0601 · commit ea5fb652fddc · 2025-01-15T15:28:42.000+08:00
diff --git a/packages/nutui/components/progress/index.ts b/packages/nutui/components/progress/index.ts
@@ -1 +1,2 @@
 export * from './progress'
+export * from './types'
diff --git a/packages/nutui/components/progress/progress.ts b/packages/nutui/components/progress/progress.ts
@@ -1,5 +1,6 @@
 import type { ExtractPropTypes } from 'vue'
 import { commonProps, makeNumericProp, makeStringProp, truthProp } from '../_utils'
+import type { ProgressStatus } from './types'
 
 export const progressProps = {
   ...commonProps,
@@ -48,6 +49,7 @@ export const progressProps = {
   /**
    * @description 进度条当前状态，可选值`active(展示动画效果)` `icon(展示icon标签)`
    */
-  status: makeStringProp<'text' | 'active' | 'icon'>('text'),
+  status: makeStringProp<ProgressStatus>('text'),
 }
+
 export type ProgressProps = ExtractPropTypes<typeof progressProps>
diff --git a/packages/nutui/components/progress/progress.vue b/packages/nutui/components/progress/progress.vue
@@ -1,34 +1,104 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
 import { computed, defineComponent, useSlots } from 'vue'
 import { PREFIX } from '../_constants'
-import { getMainClass } from '../_utils'
+import { getMainClass, pxCheck } from '../_utils'
 import NutIcon from '../icon/icon.vue'
 import { progressProps } from './progress'
 
 const props = defineProps(progressProps)
 
-const slotDefault = !!useSlots().default
+const slots = useSlots()
+
+const innerValue = computed(() => {
+  return Math.max(0, Math.min(100, Number(props.percentage)))
+})
+
+const innerText = computed(() => {
+  return `${innerValue.value}${props.isShowPercentage ? '%' : ''}`
+})
+
 const classes = computed(() => {
   return getMainClass(props, componentName)
 })
-const height = computed(() => {
+
+const outerClasses = computed<Record<string, boolean>>(() => {
+  return {
+    'nut-progress-outer-part': props.showText && !props.textInside,
+    [`nut-progress-${props.size}`]: true,
+  }
+})
+
+const innerClasses = computed<Record<string, boolean>>(() => {
+  return {
+    'nut-active': props.status === 'active',
+  }
+})
+
+const outerHeight = computed(() => {
   if (props.strokeWidth)
-    return `${props.strokeWidth}px`
+    return pxCheck(props.strokeWidth)
 
   return undefined
 })
-const percentage = computed(() => {
-  return Number(props.percentage) >= 100 ? 100 : Number(props.percentage)
+
+const outerStyles = computed(() => {
+  const value: CSSProperties = {}
+
+  if (outerHeight.value != null)
+    value.height = outerHeight.value
+
+  return value
 })
-const bgStyle = computed(() => {
-  return {
-    width: `${percentage.value}%`,
-    background: props.strokeColor || '',
+
+const innerStyles = computed(() => {
+  const value: CSSProperties = {
+    width: `${innerValue.value}%`,
   }
+
+  if (props.strokeColor)
+    value.background = props.strokeColor
+
+  return value
 })
-const textStyle = computed(() => {
+
+const textStyles = computed(() => {
+  const value: CSSProperties = {
+    left: `${innerValue.value}%`,
+    transform: `translate(-${innerValue.value}%,-50%)`,
+    background: props.textBackground || props.strokeColor,
+  }
+
+  if (outerHeight.value != null)
+    value.lineHeight = outerHeight.value
+
+  return value
+})
+
+const pureTextStyles = computed(() => {
+  const value: CSSProperties = {}
+
+  if (props.textColor)
+    value.color = props.textColor
+
+  return value
+})
+
+const outsideTextStyles = computed(() => {
+  const value: CSSProperties = {}
+
+  if (outerHeight.value != null)
+    value.lineHeight = outerHeight.value
+
+  return value
+})
+
+const slotStyles = computed<CSSProperties>(() => {
   return {
-    color: props.textColor || '',
+    position: 'absolute',
+    top: '50%',
+    left: `${innerValue.value}%`,
+    transform: `translate(-${innerValue.value}%,-50%)`,
   }
 })
 </script>
@@ -47,56 +117,53 @@ export default defineComponent({
 </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 }"
+  <view :class="classes" :style="props.customStyle">
+    <view class="nut-progress-outer" :class="outerClasses" :style="outerStyles">
+      <view class="nut-progress-inner" :class="innerClasses" :style="innerStyles" />
+
+      <template v-if="props.showText && props.textInside">
+        <view
+          v-if="!slots.default"
+          class="nut-progress-text nut-progress-insidetext"
+          :style="textStyles"
+        >
+          <text :style="pureTextStyles">
+            {{ innerText }}
+          </text>
+        </view>
+
+        <view v-else class="nut-progress-slot" :style="slotStyles">
+          <slot />
+        </view>
+      </template>
+    </view>
+
+    <view
+      v-if="props.showText && !props.textInside"
+      class="nut-progress-text"
+      :style="outsideTextStyles"
     >
-      <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 v-if="props.status === 'text' || props.status === 'active'">
+        <text :style="pureTextStyles">
+          {{ innerText }}
+        </text>
       </template>
-      <template v-else-if="status === 'icon'">
-        <slot name="iconName">
-          <NutIcon
-            name="checked"
-            width="15px"
-            height="15px"
-            custom-color="#439422"
-          />
-        </slot>
+
+      <template v-else-if="props.status === 'icon'">
+        <slot v-if="slots.iconName" name="iconName" />
+
+        <NutIcon
+          v-else
+          name="checked"
+          width="15px"
+          height="15px"
+          custom-color="#439422"
+        />
       </template>
-    </div>
-  </div>
+    </view>
+  </view>
 </template>
 
 <style lang="scss">
-@import './index';
+@import "./index";
 </style>
diff --git a/packages/nutui/components/progress/types.ts b/packages/nutui/components/progress/types.ts
@@ -0,0 +1,2 @@
+export const progressStatus = ['text', 'active', 'icon'] as const
+export type ProgressStatus = (typeof progressStatus)[number]

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from './progress'`
	`2`	`+export * from './types'`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export const progressStatus = ['text', 'active', 'icon'] as const`
	`2`	`+export type ProgressStatus = (typeof progressStatus)[number]`