feat: ✨ 增强notice-bar组件vertical模式下插槽的功能

Author: jasper-ops

docs/component/notice-bar.md

@@ -109,20 +109,18 @@ const onNext = (index: number) => {
 
 1. `direction`传递`vertical`即可开启垂直滚动，目前仅支持一个方向的垂直滚动
 2. `text`为数组时才会进行滚动
-3. 垂直滚动时会提供`vertical-{index}`的插槽，`text`有几个成员就有几个这样的插槽，索引从 0 开始
-4. **插槽内容不应该改变高度，例如设置 height、padding 等可能改变高度的样式，否则会导致滚动不准确**
+3. 垂直滚动时会提供`vertical`的插槽，该插槽传递`{item: any, index: number}`
+4. <u>**插槽内容不应该改变高度，例如设置 height、padding 等可能改变高度的样式，否则会导致滚动不准确**</u>
 
 ```html
-<demo-block title="垂直滚动">
-  <wd-notice-bar prefix="warn-bold" direction="vertical" :text="textArray" :speed="0.5" :delay="3" custom-class="space" />
-  <wd-notice-bar prefix="warn-bold" direction="vertical" text="只有一条消息不会滚动" :speed="0.5" :delay="3" custom-class="space" />
-  <wd-notice-bar prefix="warn-bold" direction="vertical" :text="['', '这是文本内容，index:1', '这是文本内容，index:2']" :speed="0.5" :delay="3">
-    <template #vertical-0>
-      <!-- 插槽内容不应该改变高度，例如设置height、padding等可能改变高度的样式，否则会导致滚动不准确 -->
-      <view style="font-weight: 700">索引为0的插槽</view>
-    </template>
-  </wd-notice-bar>
-</demo-block>
+<wd-notice-bar prefix="warn-bold" direction="vertical" :text="textArray" :speed="0.5" :delay="3" custom-class="space" />
+<wd-notice-bar prefix="warn-bold" direction="vertical" text="只有一条消息不会滚动" :speed="0.5" :delay="3" custom-class="space" />
+<wd-notice-bar prefix="warn-bold" direction="vertical" :text="textArray" :speed="0.5" :delay="3">
+  <template #vertical="{ item, index }">
+    <!-- 插槽内容不应该改变高度，例如设置height、padding等可能改变高度的样式，否则会导致滚动不准确 -->
+    <view style="font-weight: 700; text-decoration: underline">{{ index }}: {{ item }}</view>
+  </template>
+</wd-notice-bar>
 ```
 
 ## Attributes
@@ -150,11 +148,11 @@ const onNext = (index: number) => {
 
 ## Slot
 
-| name             | 说明                 | 最低版本 |
-| ---------------- | -------------------- | -------- |
-| prefix           | 前置图标             | -        |
-| suffix           | 后置插槽             | -        |
-| vertical-\{index\} | 垂直滚动时提供的插槽 | -        |
+| name     | 说明                 | 类型                         | 最低版本 |
+| -------- | -------------------- | ---------------------------- | -------- |
+| prefix   | 前置图标             | -                            | -        |
+| suffix   | 后置插槽             | -                            | -        |
+| vertical | 垂直滚动时提供的插槽 | `{item: any, index: number}` | -        |
 
 ## 外部样式类
 

src/pages/noticeBar/Index.vue

@@ -71,10 +71,10 @@
     <demo-block title="垂直滚动">
       <wd-notice-bar prefix="warn-bold" direction="vertical" :text="textArray" :speed="0.5" :delay="3" custom-class="space" />
       <wd-notice-bar prefix="warn-bold" direction="vertical" text="只有一条消息不会滚动" :speed="0.5" :delay="3" custom-class="space" />
-      <wd-notice-bar prefix="warn-bold" direction="vertical" :text="['', '这是文本内容，index:1', '这是文本内容，index:2']" :speed="0.5" :delay="3">
-        <template #vertical-0>
+      <wd-notice-bar prefix="warn-bold" direction="vertical" :text="textArray" :speed="0.5" :delay="3">
+        <template #vertical="{ item, index }">
           <!-- 插槽内容不应该改变高度，例如设置height、padding等可能改变高度的样式，否则会导致滚动不准确 -->
-          <view style="font-weight: 700">索引为0的插槽</view>
+          <view style="font-weight: 700; text-decoration: underline">{{ index }}: {{ item }}</view>
         </template>
       </wd-notice-bar>
     </demo-block>

src/uni_modules/wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue

@@ -8,11 +8,11 @@
     <slot v-else name="prefix"></slot>
     <view class="wd-notice-bar__wrap">
       <view class="wd-notice-bar__content" :animation="animation" @transitionend="animationEnd">
-        <template v-if="direction === 'vertical'">
-          <slot v-for="(item, i) in textArray" :key="item" :name="`vertical-${i}`">
+        <template v-if="isVertical">
+          <slot v-for="(item, i) in textArray" :key="item" name="vertical" :item="item" :index="i">
             <view>{{ item }}</view>
           </slot>
-          <slot v-if="textArray.length > 1" name="vertical-0">
+          <slot v-if="textArray.length > 1" name="vertical" :item="textArray[0]" :index="0">
             <view>{{ textArray[0] }}</view>
           </slot>
         </template>