fix: circleprogress,toast文档优化

src/packages/__VUE/circleprogress/demo.vue

@@ -7,23 +7,18 @@
 
     <h2>环形进度条自定义样式</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" :progress-option="progressOption">
-      </nut-circleprogress>
+      <nut-circleprogress :progress="50" :progress-option="progressOption"> </nut-circleprogress>
     </div>
 
     <h2>环形进度条自定义内容</h2>
     <div class="demo__piece">
       <nut-circleprogress :progress="50" :is-auto="isAuto">
-        <slot>自定义</slot>
+        <div>自定义</div>
       </nut-circleprogress>
     </div>
     <h2>动态改变环形进度条的进度</h2>
     <div class="demo__piece">
-      <nut-circleprogress
-        :progress="percent"
-        :progress-option="progressOption"
-        :stroke-inner-width="strokeInnerWidth"
-      >
+      <nut-circleprogress :progress="percent" :progress-option="progressOption" :stroke-inner-width="strokeInnerWidth">
       </nut-circleprogress>
     </div>
     <div class="demo__btn">

src/packages/__VUE/circleprogress/doc.md

@@ -32,7 +32,9 @@ app.use(CirecleProgress);
 ### 环形进度条自定义内容
 
 ```html
- <nut-circleprogress progress="50" :is-auto="true"></nut-circleprogress>
+ <nut-circleprogress progress="50" :is-auto="true">
+    <div>自定义</div>
+ </nut-circleprogress>
 ```
 ### 动态改变环形进度条的进度
 
@@ -84,5 +86,5 @@ app.use(CirecleProgress);
 |----- | ----- | ----- | -----
 | progress | 百分比 | Number,String | 必传项，无默认值
 | stroke-inner-width | 圆弧的宽度 | Number,String | 10
-| is-auto | 是否自定义内容显示（taro暂不支持） | Boolean | false
+| is-auto | 是否自定义内容显示 | Boolean | false
 | progress-option | 外圆相关参数对象,其中包括半径，宽度，背景颜色，进度色值 | Object | {radius: 50,strokeOutWidth: 10, backColor: '#d9d9d9',progressColor: 'red'}

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

@@ -6,7 +6,13 @@
           <div class="nut-circleprogress__line__c" :style="RightStyle"></div>
         </div>
       </div>
-      <div class="nut-circleprogress__progress">{{ progress }} %</div>
+      <div class="nut-circleprogress__progress">
+        <template v-if="!isAuto">
+          <slot>{{ progress }}%</slot>
+        </template>
+        <template v-else><slot></slot></template>
+      </div>
+
       <div class="nut-circleprogress__left">
         <div class="nut-circleprogress__line nut-circleprogress__l">
           <div class="nut-circleprogress__line__c" :style="LeftStyle"></div>
@@ -14,11 +20,7 @@
       </div>
     </div>
     <div v-else>
-      <svg
-        :height="option.size"
-        :width="option.size"
-        x-mlns="http://www.w3.org/200/svg"
-      >
+      <svg :height="option.size" :width="option.size" x-mlns="http://www.w3.org/200/svg">
         <circle
           :r="option.radius"
           :cx="option.cx"
@@ -40,7 +42,12 @@
           style="transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s"
         />
       </svg>
-      <div class="nut-circleprogress__progress">{{ progress }}%</div>
+      <div class="nut-circleprogress__progress">
+        <template v-if="!isAuto">
+          <slot>{{ progress }}%</slot>
+        </template>
+        <template v-else><slot></slot></template>
+      </div>
     </div>
   </div>
 </template>
@@ -136,15 +143,9 @@ export default create({
         transform: `rotate(${rotateRight.value + 'deg'})`,
         transition: `all 0.3s`,
         borderTop: `${InnerWidth.value + 'px'} solid ${cricleData.backColor};`,
-        borderLeft: `${InnerWidth.value + 'px'} solid  ${
-          cricleData.backColor
-        };`,
-        borderBottom: `${InnerWidth.value + 'px'} solid ${
-          cricleData.progressColor
-        };`,
-        borderRight: `${InnerWidth.value + 'px'} solid ${
-          cricleData.progressColor
-        };`
+        borderLeft: `${InnerWidth.value + 'px'} solid  ${cricleData.backColor};`,
+        borderBottom: `${InnerWidth.value + 'px'} solid ${cricleData.progressColor};`,
+        borderRight: `${InnerWidth.value + 'px'} solid ${cricleData.progressColor};`
       };
     });
     const LeftStyle = computed(() => {
@@ -153,15 +154,9 @@ export default create({
         transform: `rotate(${rotateLeft.value + 'deg'})`,
         transition: `all 0.3s`,
         borderTop: `${InnerWidth.value + 'px'} solid ${cricleData.backColor};`,
-        borderLeft: `${InnerWidth.value + 'px'} solid  ${
-          cricleData.backColor
-        };`,
-        borderBottom: `${InnerWidth.value + 'px'} solid ${
-          cricleData.progressColor
-        };`,
-        borderRight: `${InnerWidth.value + 'px'} solid ${
-          cricleData.progressColor
-        };`
+        borderLeft: `${InnerWidth.value + 'px'} solid  ${cricleData.backColor};`,
+        borderBottom: `${InnerWidth.value + 'px'} solid ${cricleData.progressColor};`,
+        borderRight: `${InnerWidth.value + 'px'} solid ${cricleData.progressColor};`
       };
     });
     const option = computed(() => {
@@ -178,11 +173,9 @@ export default create({
       };
       Object.assign(baseOption, props.progressOption);
       // 圆心位置自动生成
-      baseOption.cy = baseOption.cx =
-        baseOption.radius + baseOption.strokeOutWidth;
+      baseOption.cy = baseOption.cx = baseOption.radius + baseOption.strokeOutWidth;
       baseOption.size = (baseOption.radius + baseOption.strokeOutWidth) * 2;
-      baseOption.startPosition =
-        'rotate(-90,' + baseOption.cx + ',' + baseOption.cy + ')';
+      baseOption.startPosition = 'rotate(-90,' + baseOption.cx + ',' + baseOption.cy + ')';
       return baseOption;
     });
     const arcLength = computed(() => {

src/packages/__VUE/circleprogress/index.vue

@@ -1,13 +1,6 @@
 <template>
-  <div
-    :class="classes"
-    :style="{ height: option.size + 'px', width: option.size + 'px' }"
-  >
-    <svg
-      :height="option.size"
-      :width="option.size"
-      x-mlns="http://www.w3.org/200/svg"
-    >
+  <div :class="classes" :style="{ height: option.size + 'px', width: option.size + 'px' }">
+    <svg :height="option.size" :width="option.size" x-mlns="http://www.w3.org/200/svg">
       <circle
         :r="option.radius"
         :cx="option.cx"
@@ -30,9 +23,9 @@
       />
     </svg>
     <div class="nut-circleprogress-content">
-      <template v-if="!isAuto"
-        ><slot>{{ progress }}%</slot></template
-      >
+      <template v-if="!isAuto">
+        <slot>{{ progress }}%</slot>
+      </template>
       <template v-else><slot></slot></template>
     </div>
   </div>
@@ -82,11 +75,9 @@ export default create({
       };
       Object.assign(baseOption, props.progressOption);
       // 圆心位置自动生成
-      baseOption.cy = baseOption.cx =
-        baseOption.radius + baseOption.strokeOutWidth;
+      baseOption.cy = baseOption.cx = baseOption.radius + baseOption.strokeOutWidth;
       baseOption.size = (baseOption.radius + baseOption.strokeOutWidth) * 2;
-      baseOption.startPosition =
-        'rotate(-90,' + baseOption.cx + ',' + baseOption.cy + ')';
+      baseOption.startPosition = 'rotate(-90,' + baseOption.cx + ',' + baseOption.cy + ')';
       return baseOption;
     });
     const arcLength = computed(() => {

src/packages/__VUE/toast/doc.md

@@ -36,14 +36,15 @@ import { Toast } from '@nutui/nutui';
 export default {
   setup() {
     Toast.text('网络失败，请稍后再试~');
-    Toast.text(msg,{
-        title:'标题文字'
-        });
     return {};
   },
 };
 ```
+#### 标题提示
 
+``` javascript
+Toast.text(msg,{title:'标题文字' });
+```
 #### 成功提示
 
 ``` javascript
@@ -75,6 +76,14 @@ Toast.text(msg,{
     duration:0
 });
 ```
+#### Toast自定义底部高度
+
+``` javascript
+Toast.text(msg, {
+    center: false,
+    bottom: '10%'
+});
+```
 
 #### Loading带透明罩
 ``` javascript

src/sites/mobile-taro/vue/src/feedback/pages/circleprogress/index.vue

@@ -7,23 +7,18 @@
 
     <h2>环形进度条自定义样式</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" :progress-option="progressOption">
-      </nut-circleprogress>
+      <nut-circleprogress :progress="20" :progress-option="progressOption"> </nut-circleprogress>
     </div>
 
     <h2>环形进度条自定义内容</h2>
     <div class="demo__piece">
-      <nut-circleprogress :progress="50" :is-auto="isAuto">
-        <slot>自定义</slot>
+      <nut-circleprogress :progress="60" :is-auto="isAuto">
+        <div>自定义</div>
       </nut-circleprogress>
     </div>
     <h2>动态改变环形进度条的进度</h2>
     <div class="demo__piece">
-      <nut-circleprogress
-        :progress="percent"
-        :progress-option="progressOption"
-        :stroke-inner-width="strokeInnerWidth"
-      >
+      <nut-circleprogress :progress="percent" :progress-option="progressOption" :stroke-inner-width="strokeInnerWidth">
       </nut-circleprogress>
     </div>
     <div class="demo__btn">
@@ -42,7 +37,7 @@ export default {
       radius: 50,
       strokeOutWidth: 10,
       backColor: '#d9d9d9',
-      progressColor: 'red'
+      progressColor: 'blue'
     });
     const percent = ref(50);
     const strokeInnerWidth = ref(10);