feat: ✨ notice-bar增加多文本轮播功能

Author: jasper-ops

docs/component/notice-bar.md

@@ -79,20 +79,45 @@
 />
 ```
 
+## 多文本轮播
+将一个`string[]`传递给`text`属性，即可开启多文本轮播，并且会在展示下一条文本时触发`next`事件，该事件接收一个`number`参数，代表的是当前展示的文本数组索引
+
+```html
+<wd-notice-bar :text="textArray" prefix="check-outline" @next="onNext" />
+```
+
+```javascript
+import { ref } from 'vue'
+
+const textArray = ref([
+  '欢迎使用wot design uni',
+  '该组件库基于uniapp ->Vue3, ts构建',
+  '项目地址：https://github.com/Moonofweisheng/wot-design-uni',
+  '我们的目标是打造最强uniapp组件库',
+  '诚挚邀请大家共同建设'
+])
+
+const onNext = (index: number) => {
+  console.log('展示下一条，index: ', index)
+  console.log('文本是：' + textArray.value[index])
+}
+```
+
+
 ## Attributes
 
 | 参数             | 说明                                   | 类型    | 可选值                  | 默认值  | 最低版本 |
 | ---------------- | -------------------------------------- | ------- | ----------------------- | ------- | -------- |
-| text             | 设置通知栏文案                         | string  | -                       | -       | -        |
-| type             | 设置通知栏类型                         | string  | info / warning / danger | warning | -        |
-| prefix           | 设置左侧图标，使用 icon 章节中的图标名 | string  | -                       | -       | -        |
-| scrollable       | 是否可以滚动                           | boolean | -                       | true    | -        |
-| delay            | 滚动动画初始延时，单位 秒(s)           | number  | -                       | 1       | -        |
-| speed            | 滚动速度，单位 px/s                    | number  | -                       | 50      | -        |
-| closable         | 是否可以关闭                           | boolean | -                       | false   | -        |
-| wrapable         | 是否换行展示                           | boolean | -                       | false   | -        |
-| color            | 文字、图标颜色                         | string  | -                       | -       | -        |
-| background-color | 背景颜色                               | string  | -                       | -       | -        |
+| text             | 设置通知栏文案                         | `string` `string[]`  | -                       | -       | -        |
+| type             | 设置通知栏类型                         | `string`  | info / warning / danger | warning | -        |
+| prefix           | 设置左侧图标，使用 icon 章节中的图标名 | `string`  | -                       | -       | -        |
+| scrollable       | 是否可以滚动                           | `boolean` | -                       | true    | -        |
+| delay            | 滚动动画初始延时，单位 秒(s)           | `number`  | -                       | 1       | -        |
+| speed            | 滚动速度，单位 px/s                    | `number`  | -                       | 50      | -        |
+| closable         | 是否可以关闭                           | `boolean` | -                       | false   | -        |
+| wrapable         | 是否换行展示                           | `boolean` | -                       | false   | -        |
+| color            | 文字、图标颜色                         | `string`  | -                       | -       | -        |
+| background-color | 背景颜色                               | `string`  | -                       | -       | -        |
 
 ## Events
 

src/pages/noticeBar/Index.vue

@@ -3,7 +3,7 @@
  * @Date: 2023-06-13 11:47:12
  * @LastEditTime: 2023-08-07 20:24:04
  * @LastEditors: weisheng
- * @Description: 
+ * @Description:
  * @FilePath: \wot-design-uni\src\pages\noticeBar\Index.vue
  * 记得注释
 -->
@@ -57,9 +57,28 @@
         background-color="#f0f9eb"
       ></wd-notice-bar>
     </demo-block>
+
+    <demo-block title="多文本轮播">
+      <wd-notice-bar :text="textArray" prefix="check-outline" @next="onNext" />
+    </demo-block>
   </page-wraper>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const textArray = ref([
+  '欢迎使用wot design uni',
+  '该组件库基于uniapp ->Vue3, ts构建',
+  '项目地址：https://github.com/Moonofweisheng/wot-design-uni',
+  '我们的目标是打造最强uniapp组件库',
+  '诚挚邀请大家共同建设'
+])
+
+const onNext = (index: number) => {
+  console.log('展示下一条，index: ', index)
+  console.log('文本是：' + textArray.value[index])
+}
+</script>
 <style lang="scss" scoped>
 :deep(.prefix) {
   font-size: 18px;

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

@@ -1,3 +1,4 @@
+import type { PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 
 export type NoticeBarType = 'warning' | 'info' | 'danger' | ''
@@ -7,7 +8,10 @@ export const noticeBarProps = {
   /**
    * 设置通知栏文案
    */
-  text: String,
+  text: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: ''
+  },
   /**
    * 设置通知栏类型，可选值为：'warning' | 'info' | 'danger'
    */

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

@@ -8,8 +8,7 @@
     <slot v-else name="prefix"></slot>
     <view class="wd-notice-bar__wrap">
       <view class="wd-notice-bar__content" :animation="animation" @transitionend="animationEnd">
-        {{ text }}
-        <slot></slot>
+        <slot>{{ currentText }}</slot>
       </view>
     </view>
     <wd-icon v-if="closable" custom-class="wd-notice-bar__suffix" size="18px" name="close-bold" @click="handleClose"></wd-icon>
@@ -33,22 +32,22 @@ import { getRect } from '../common/util'
 import { getCurrentInstance } from 'vue'
 import { nextTick } from 'vue'
 import { noticeBarProps } from './types'
+import { computed } from 'vue'
 
 const $wrap = '.wd-notice-bar__wrap'
 const $content = '.wd-notice-bar__content'
 
 const props = defineProps(noticeBarProps)
 
-const firstPlay = ref<boolean>(true)
 const wrapWidth = ref<number>(0)
-const contentWidth = ref<number>(0)
 const show = ref<boolean>(true)
-const duration = ref<number>(0)
 const animation = ref<string>('')
 const noticeBarClass = ref<string>('')
+const currentIndex = ref(0)
+const textArray = computed(() => (Array.isArray(props.text) ? props.text : [props.text]))
+const currentText = computed(() => textArray.value[currentIndex.value])
 
 const { proxy } = getCurrentInstance() as any
-
 watch(
   [() => props.type, () => props.scrollable, () => props.wrapable],
   () => {
@@ -60,9 +59,7 @@ watch(
 watch(
   [() => props.text],
   () => {
-    nextTick(() => {
-      scroll()
-    })
+    nextTick(() => scroll())
   },
   { deep: true, immediate: true }
 )
@@ -71,7 +68,7 @@ onBeforeMount(() => {
   computedClass()
 })
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'next'])
 
 function computedClass() {
   const { type, wrapable, scrollable } = props
@@ -104,18 +101,36 @@ function scroll() {
 
     const wrapWidthTemp = wrapRect.width
     const contentWidthTemp = contentRect.width
-    if (props.scrollable && contentWidthTemp > wrapWidthTemp) {
+    if (props.scrollable) {
       animation.value = initAnimation((contentWidthTemp / props.speed) * 1000, props.delay * 1000, -contentWidthTemp)
       wrapWidth.value = wrapWidthTemp
-      contentWidth.value = contentWidthTemp
     }
   })
 }
 
+function next() {
+  if (currentIndex.value >= textArray.value.length - 1) {
+    currentIndex.value = 0
+  } else {
+    currentIndex.value++
+  }
+  emit('next', currentIndex.value)
+}
+
 function animationEnd() {
   animation.value = initAnimation(0, 0, wrapWidth.value)
+
   const timer = setTimeout(() => {
-    animation.value = initAnimation(((wrapWidth.value + contentWidth.value) / props.speed) * 1000, 0, -contentWidth.value)
+    next() // 更换下一条文本
+
+    nextTick(() => {
+      // 因为文本会发生变化，所以contentWidth每一次都需要查询
+      getRect($content, false, proxy).then((rect) => {
+        if (!rect) return
+        animation.value = initAnimation(((wrapWidth.value + rect.width!) / props.speed) * 1000, props.delay * 1000, -rect.width!)
+      })
+    })
+
     clearTimeout(timer)
   }, 20)
 }