fix: 组件文档完善,bug修改 (#2070)

* fix: 4.0测试期间发现的问题3.0同步修改

* feat: sku组件问题修改

* docs: 组件文档修改

* fix: sku组件修改

* fix: noticebar问题修改

* fix: noticebar问题修改

src/packages/__VUE/audio/demo.vue

@@ -22,7 +22,7 @@
       ref="audioDemo"
     >
       <div class="nut-voice">
-        <div><nut-icon name="voice"></nut-icon></div>
+        <div style="display: flex"><nut-icon name="voice"></nut-icon></div>
         <div>{{ duration }}"</div>
       </div>
     </nut-audio>
@@ -167,6 +167,7 @@ export default createDemo({
   .nut-voice {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     width: 100px;
     height: 20px;
     padding: 8px;

src/packages/__VUE/comment/doc.en-US.md

@@ -32,7 +32,6 @@ By default, images of reviews for individual items are displayed in a single sli
     :images="cmt.images"
     :videos="cmt.videos"
     :info="cmt.info"
-    :labels="labels"
     @click="handleclick"
     @clickImages="clickImages"
     :operation="['replay']"
@@ -45,14 +44,11 @@ By default, images of reviews for individual items are displayed in a single sli
     </template>
 </nut-comment>
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
     let cmt = ref({});
-    const labels = () => {
-      return '<nut-icon name="dongdong" color="#fa2c19"></nut-icon>';
-    };
     onMounted(()=>{
       fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
         .then((response) => response.json())
@@ -69,12 +65,12 @@ export default {
     }
     return {
       cmt,
-      labels,
       handleclick,
       clickImages
     };
   }
 }
+</script>
 
 ```
 :::
@@ -112,7 +108,7 @@ The value of `headerType` allows you to set the image to be displayed in multipl
 </nut-comment>
 
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
@@ -134,7 +130,7 @@ export default {
     };
   }
 }
-
+</script>
 ```
 :::
 
@@ -153,7 +149,7 @@ export default {
 ></nut-comment>
 
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
@@ -175,6 +171,7 @@ export default {
     };
   }
 }
+</script>
 
 ```
 :::
@@ -243,3 +240,15 @@ const info = [{
   "like":1, // Number of likes for this comment
 }]
 ```
+
+### follow 对象
+
+用于存放追评相关的信息。
+
+```javascript
+const follow = {
+  "days": 0, // 购买多少天后进行追评
+  "content": "", // 追评内容
+  "images": [] // 追评图片
+}
+```

src/packages/__VUE/comment/doc.md

@@ -32,7 +32,6 @@ app.use(Rate);
     :images="cmt.images"
     :videos="cmt.videos"
     :info="cmt.info"
-    :labels="labels"
     @click="handleclick"
     @clickImages="clickImages"
     :operation="['replay']"
@@ -45,14 +44,11 @@ app.use(Rate);
     </template>
 </nut-comment>
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
     let cmt = ref({});
-    const labels = () => {
-      return '<nut-icon name="dongdong" color="#fa2c19"></nut-icon>';
-    };
     onMounted(()=>{
       fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
         .then((response) => response.json())
@@ -69,12 +65,12 @@ export default {
     }
     return {
       cmt,
-      labels,
       handleclick,
       clickImages
     };
   }
 }
+</script>
 
 ```
 :::
@@ -112,7 +108,7 @@ export default {
 </nut-comment>
 
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
@@ -134,6 +130,7 @@ export default {
     };
   }
 }
+</script>
 
 ```
 :::
@@ -153,7 +150,7 @@ export default {
 ></nut-comment>
 
 </template>
-<script>
+<script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
 export default {
   setup() {
@@ -175,7 +172,7 @@ export default {
     };
   }
 }
-
+</script>
 ```
 :::
 ## API
@@ -247,3 +244,15 @@ const info = [{
   "like":1, // 此评论的点赞数
 }]
 ```
+
+### follow 对象
+
+用于存放追评相关的信息。
+
+```javascript
+const follow = {
+  "days": 0, // 购买多少天后进行追评
+  "content": "", // 追评内容
+  "images": [] // 追评图片
+}
+```

src/packages/__VUE/countdown/doc.en-US.md

@@ -290,10 +290,10 @@ Paused and restarted the countdown with the paused attribute
         CountDown.value.reset();
       };
       return {
-          toggle,
-          onpaused,
-          onrestart,
-        ...toRefs(state)
+          start,
+          pause,
+          reset,
+          CountDown
       };
     }
   }

src/packages/__VUE/countdown/doc.md

@@ -293,10 +293,10 @@ app.use(CountDown);
         CountDown.value.reset();
       };
       return {
-          toggle,
-          onpaused,
-          onrestart,
-        ...toRefs(state)
+          start,
+          pause,
+          reset,
+          CountDown
       };
     }
   }

src/packages/__VUE/datepicker/doc.md

@@ -37,7 +37,7 @@ app.use(OverLay);
   ></nut-datepicker> 
 </template>
 
-<script>
+<script lang="ts">
   import { ref } from 'vue';
   export default {
     setup(props) {

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

@@ -2,7 +2,7 @@
   <view
     :class="classes"
     ref="myDrag"
-    :id="'drag-' + refRandomId"
+    :id="'myDrag' + refRandomId"
     class="myDrag"
     @touchstart="touchStart($event)"
     @touchmove.prevent="touchMove($event)"
@@ -21,6 +21,7 @@
 import { onMounted, onDeactivated, onActivated, reactive, ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import requestAniFrame from '@/packages/utils/raf';
+import { useTaroRect } from '@/packages/utils/useTaroRect';
 const { componentName, create } = createComponent('drag');
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
 export default create({
@@ -81,18 +82,12 @@ export default create({
       };
     });
     const domElem = Taro.getSystemInfoSync();
-    function getInfo() {
-      const query = Taro.createSelectorQuery();
-      query
-        .select('#drag-' + refRandomId)
-        .boundingClientRect((rec: any) => {
-          state.elWidth = rec.width;
-          state.elHeight = rec.height;
-          state.initTop = rec.top;
-          state.initLeft = rec.left;
-        })
-        .exec();
-      // console.log(domElem.windowWidth);
+    async function getInfo() {
+      const rec = await useTaroRect(myDrag, Taro);
+      state.elWidth = rec.width;
+      state.elHeight = rec.height;
+      state.initTop = rec.top;
+      state.initLeft = rec.left;
 
       state.screenWidth = domElem.screenWidth;
       state.screenHeight = domElem.screenHeight;

src/packages/__VUE/noticebar/demo.vue

@@ -148,10 +148,9 @@ export default createDemo({
 .demo {
   padding-bottom: 30px !important;
 
-  // .interstroll-list {
-  //   padding: 0 10px;
-  //   background: rgba(251, 248, 220, 1);
-  //   color: #d9500b;
-  // }
+  .interstroll-list {
+    background: rgba(251, 248, 220, 1);
+    color: #d9500b;
+  }
 }
 </style>

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

@@ -61,7 +61,7 @@
           <slot name="rightIcon"></slot>
         </template>
         <template v-else-if="closeMode">
-          <nut-icon type="cross" :color="color" size="11px"></nut-icon>
+          <nut-icon v-bind="$attrs" name="close" v-if="closeMode" :color="color" size="11px"></nut-icon>
         </template>
       </view>
     </view>

src/packages/__VUE/noticebar/index.vue

@@ -56,8 +56,8 @@
       </template>
 
       <view class="go" @click="!slots.rightIcon && handleClickIcon()">
-        <slot name="rightIcon">
-          <nut-icon type="cross" v-if="closeMode" :color="color" size="11px"></nut-icon>
+        <slot name="right-icon">
+          <nut-icon v-bind="$attrs" name="close" v-if="closeMode" :color="color" size="11px"></nut-icon>
         </slot>
       </view>
     </view>

src/packages/__VUE/picker/doc.md

@@ -166,15 +166,15 @@ columns 属性可以通过二维数组的形式配置多列选择。
 ```html
 <template>
   <nut-cell title="请选择城市" :desc="desc" @click="()=>{show=true}"></nut-cell>
-    <nut-picker
-      v-model="selectedTime"
-      v-model:visible="show"
-      :columns="multipleColumns"
-      title="城市选择"
-      @confirm="confirm"
-      @change="change"
-    >
-    </nut-picker>
+  <nut-picker
+    v-model="selectedTime"
+    v-model:visible="show"
+    :columns="multipleColumns"
+    title="城市选择"
+    @confirm="confirm"
+    @change="change"
+  >
+  </nut-picker>
 </template>
 <script>
   import { ref } from 'vue';
@@ -207,10 +207,11 @@ columns 属性可以通过二维数组的形式配置多列选择。
         console.log(selectedValue);
       };
 
-      return {show,desc,columns,change, confirm, selectedTime};
+      return {show,desc,change, confirm, selectedTime,multipleColumns};
     }
   };
 </script>
+
 ```
 :::
 
@@ -315,7 +316,7 @@ columns 属性可以通过二维数组的形式配置多列选择。
     @confirm="confirm"
   ></nut-picker>
 </template>
-<script>
+<script lang="ts">
   import { ref, onMounted } from 'vue';
   export default {
     setup(props) {
@@ -362,7 +363,7 @@ Picker 组件在底部和顶部分别设置了插槽，可进行自定义设置
   <nut-cell title="请选择截止时间" :desc="desc" @click="()=>{show=true}"></nut-cell>
   <nut-picker
     v-model:visible="show"
-    :columns="asyncColumns"
+    :columns="effectColumns"
     title="日期选择"
     @confirm="confirm"
   >

src/packages/__VUE/sku/components/SkuHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="nut-sku-header">
-    <img :src="goods.imagePath" />
+    <img class="nut-sku-header-img" :src="goods.imagePath" />
 
     <view class="nut-sku-header-right">
       <template v-if="getSlots('sku-header-price')">