fix: progress 修改

src/packages/__VUE/progress/doc.md

@@ -137,6 +137,48 @@ app.use(Icon);
 </template>
 ```
 :::
+### 动态改变
+:::demo
+```html
+<template>
+   <div>
+    <nut-cell>
+      <nut-progress :percentage="val" />
+    </nut-cell>
+    <nut-cell>
+      <nut-button type="default" @click="setReduceVal">减少</nut-button>
+      <nut-button type="primary" @click="setAddVal">增加</nut-button>
+    </nut-cell>
+    </div>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default{
+    setup() {
+    const val = ref(0);
+    const setAddVal = () => {
+      if (val.value >= 100) {
+        return false;
+      }
+      val.value += 10;
+    };
+    const setReduceVal = () => {
+      if (val.value <= 0) {
+        return false;
+      }
+      val.value -= 10;
+    };
+    return {
+      val,
+      setAddVal,
+      setReduceVal,
+    };
+  }
+
+  }
+</script>
+```
+:::
 ## API
 ### Props
 

src/packages/__VUE/progress/index.scss

@@ -85,6 +85,8 @@
     font-size: 13px;
     line-height: 1;
     min-width: 35px;
+    display: flex;
+    align-items: center;
   }
   .nut-progress-insidetext {
     padding: $progress-insidetext-padding;

src/packages/__VUE/progress/index.taro.vue

@@ -34,7 +34,7 @@
         </div>
       </div>
     </div>
-    <div class="nut-progress-text" :style="{ lineHeight: height }" v-if="showText && !textInside">
+    <div class="nut-progress-text" v-if="showText && !textInside">
       <template v-if="status == 'text' || status == 'active'">
         <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
       </template>
@@ -49,7 +49,6 @@
 import { computed, onMounted, useSlots, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
-import { log } from 'lzutf8';
 const { create } = createComponent('progress');
 export default create({
   props: {
@@ -109,9 +108,12 @@ export default create({
     const insideText = ref();
     const refRandomId = Math.random().toString(36).slice(-8);
     const randRef = ref(refRandomId);
+    const percentage = computed(() => {
+      return props.percentage >= 100 ? 100 : props.percentage;
+    });
     const bgStyle = computed(() => {
       return {
-        width: props.percentage + '%',
+        width: percentage.value + '%',
         background: props.strokeColor || ''
       };
     });
@@ -128,6 +130,7 @@ export default create({
       height,
       bgStyle,
       textStyle,
+      percentage,
       insideText,
       randRef,
       slotDefault

src/packages/__VUE/progress/index.vue

@@ -34,7 +34,7 @@
         </div>
       </div>
     </div>
-    <div class="nut-progress-text" :style="{ lineHeight: height }" v-if="showText && !textInside">
+    <div class="nut-progress-text" v-if="showText && !textInside">
       <template v-if="status == 'active' || status == ''">
         <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }}</span>
       </template>
@@ -106,9 +106,12 @@ export default create({
     const height = ref(props.strokeWidth + 'px');
     const progressOuter = ref();
     const insideText = ref();
+    const percentage = computed(() => {
+      return props.percentage >= 100 ? 100 : props.percentage;
+    });
     const bgStyle = computed(() => {
       return {
-        width: props.percentage + '%',
+        width: percentage.value + '%',
         background: props.strokeColor || ''
       };
     });
@@ -122,6 +125,7 @@ export default create({
       height,
       bgStyle,
       textStyle,
+      percentage,
       progressOuter,
       insideText,
       slotDefault

src/sites/mobile-taro/vue/src/exhibition/pages/progress/index.vue

@@ -65,14 +65,14 @@
         />
       </nut-cell>
       <nut-cell>
-        <nut-progress percentage="50" :stroke-width="strokeWidth" status="wrong" />
+        <nut-progress percentage="50" status="icon" />
       </nut-cell>
       <nut-cell>
         <nut-progress
           percentage="100"
           stroke-color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
           stroke-width="15"
-          status="success"
+          status="icon"
           icon-name="issue"
           icon-color="red"
         />