fix(progress): component optimization (#2060)

jd-opensource · Jan 16, 2023 · d4c0cfd · d4c0cfd
1 parent 0426429
commit d4c0cfd
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 18 deletions.
diff --git a/src/packages/__VUE/progress/demo.vue b/src/packages/__VUE/progress/demo.vue
@@ -99,14 +99,14 @@ import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
-      basic: '基本用法',
-      customStyle: '线形进度条-设置颜色高度',
-      noShowPercentage: '百分比不显示',
-      showPercentage: '百分比外显',
-      showInsidePercentage: '百分比内显',
-      customContent: '百分比内显自定义',
-      customSize: '百分比内显自定义',
-      statusDisplay: '状态显示',
+      basic: '基础用法',
+      customStyle: '设置高度和颜色',
+      noShowPercentage: '设置百分比不显示',
+      showPercentage: '设置百分比外显',
+      showInsidePercentage: '设置百分比内显',
+      customContent: '设置百分比内显自定义内容',
+      customSize: '自定义尺寸',
+      statusDisplay: '设置状态显示',
       dynamicChange: '动态改变',
       reduce: '减少',
       add: '增加'

diff --git a/src/packages/__VUE/progress/doc.md b/src/packages/__VUE/progress/doc.md
@@ -36,7 +36,7 @@ app.use(Icon);
 ```html
 <template>
   <nut-cell>
-    <nut-progress percentage="30" stroke-color=" rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
+    <nut-progress percentage="30" stroke-color="rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
    </nut-cell>
 </template>
 ```
@@ -121,7 +121,7 @@ app.use(Icon);
         />
       </nut-cell>
       <nut-cell>
-        <nut-progress percentage="50" :stroke-width="strokeWidth" status="icon" />
+        <nut-progress percentage="50" status="icon" />
       </nut-cell>
       <nut-cell>
         <nut-progress
@@ -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
 

diff --git a/src/packages/__VUE/progress/index.scss b/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;

diff --git a/src/packages/__VUE/progress/index.taro.vue b/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

diff --git a/src/packages/__VUE/progress/index.vue b/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

diff --git a/src/sites/mobile-taro/vue/src/exhibition/pages/progress/index.vue b/src/sites/mobile-taro/vue/src/exhibition/pages/progress/index.vue
@@ -10,7 +10,7 @@
     <h2>线形进度条-设置颜色高度</h2>
     <div>
       <nut-cell>
-        <nut-progress percentage="30" stroke-color=" rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
+        <nut-progress percentage="30" stroke-color="rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
       </nut-cell>
     </div>
     <h2>线形进度条-百分比不显示</h2>
@@ -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"
         />