fix(progress): add custom slot (#1196)

src/packages/__VUE/progress/demo.vue

@@ -31,6 +31,18 @@
         <nut-progress percentage="60" :text-inside="true" />
       </nut-cell>
     </div>
+    <h2>线形进度条-百分比内显自定义</h2>
+    <div>
+      <nut-cell>
+        <nut-progress percentage="60" :text-inside="true">
+          <nut-icon
+            style="display: block"
+            size="30"
+            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+          ></nut-icon>
+        </nut-progress>
+      </nut-cell>
+    </div>
     <h2>线形进度条-自定义尺寸(内置"small","base","large"三种规格)</h2>
     <div>
       <nut-cell>

src/packages/__VUE/progress/doc.md

@@ -73,6 +73,22 @@ app.use(Icon);
 </template>
 ```
 :::
+### 设置百分比内显自定义内容
+:::demo
+```html
+<template>
+     <nut-cell>
+        <nut-progress percentage="60" :text-inside="true">
+          <nut-icon
+            style="display: block"
+            size="30"
+            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+          ></nut-icon>
+        </nut-progress>
+      </nut-cell>
+</template>
+```
+:::
 
 ## 自定义尺寸
 

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

@@ -11,17 +11,28 @@
         <div
           class="nut-progress-text nut-progress-insidetext"
           ref="insideText"
-          :id="'nut-progress-insidetext-taro-' + randRef"
           :style="{
             lineHeight: height,
             left: `${percentage}%`,
             transform: `translate(-${+percentage}%,-50%)`,
             background: textBackground || strokeColor
           }"
-          v-if="showText && textInside"
+          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>
     <div class="nut-progress-text" :style="{ lineHeight: height }" v-if="showText && !textInside">
@@ -36,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { computed, onMounted, provide, reactive, nextTick, ref, watch } from 'vue';
+import { computed, onMounted, useSlots, ref, watch } from 'vue';
 import { createComponent } from '../../utils/create';
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
 import { log } from 'lzutf8';
@@ -94,6 +105,7 @@ export default create({
     }
   },
   setup(props, { emit }) {
+    const slotDefault = !!useSlots().default;
     const height = ref(props.strokeWidth + 'px');
     const progressOuter = ref<any>();
     const insideText = ref();
@@ -120,7 +132,8 @@ export default create({
       textStyle,
       progressOuter,
       insideText,
-      randRef
+      randRef,
+      slotDefault
     };
   }
 });

src/packages/__VUE/progress/index.vue

@@ -16,10 +16,22 @@
             transform: `translate(-${+percentage}%,-50%)`,
             background: textBackground || strokeColor
           }"
-          v-if="showText && textInside"
+          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>
     <div class="nut-progress-text" :style="{ lineHeight: height }" v-if="showText && !textInside">
@@ -34,8 +46,7 @@
 </template>
 
 <script lang="ts">
-import { log } from 'lzutf8';
-import { computed, onMounted, provide, reactive, nextTick, ref, watch } from 'vue';
+import { computed, onMounted, useSlots, ref, watch } from 'vue';
 import { createComponent } from '../../utils/create';
 const { create } = createComponent('progress');
 export default create({
@@ -91,6 +102,7 @@ export default create({
     }
   },
   setup(props, { emit }) {
+    const slotDefault = !!useSlots().default;
     const height = ref(props.strokeWidth + 'px');
     const progressOuter = ref();
     const insideText = ref();
@@ -111,7 +123,8 @@ export default create({
       bgStyle,
       textStyle,
       progressOuter,
-      insideText
+      insideText,
+      slotDefault
     };
   }
 });

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

@@ -31,6 +31,18 @@
         <nut-progress percentage="60" :text-inside="true" />
       </nut-cell>
     </div>
+    <h2>线形进度条-百分比内显自定义</h2>
+    <div>
+      <nut-cell>
+        <nut-progress percentage="60" :text-inside="true">
+          <nut-icon
+            style="display: block"
+            size="30"
+            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+          ></nut-icon>
+        </nut-progress>
+      </nut-cell>
+    </div>
     <h2>线形进度条-自定义尺寸(内置"small","base","large"三种规格)</h2>
     <div>
       <nut-cell>