feat: ✨ Noticebar 通知栏新增支持click点击事件

Author: xuqingkai

docs/component/notice-bar.md

@@ -133,10 +133,11 @@ const onNext = (index: number) => {
 
 ## Events
 
-| 事件名称 | 说明             | 参数            | 最低版本 |
-| -------- | ---------------- | --------------- | -------- |
-| close    | 关闭按钮点击时   | -               | -        |
-| next     | 下一次滚动前触发 | index: `number` | -        |
+| 事件名称 | 说明             | 参数                                                                           | 最低版本 |
+| -------- | ---------------- | ------------------------------------------------------------------------------ | -------- |
+| close    | 关闭按钮点击时   | -                                                                              | -        |
+| next     | 下一次滚动前触发 | index: `number`                                                                | -        |
+| click    | 点击时触发       | `{ text: string, index: number }`，其中`text`为当前文本，`index`为当前文本索引 | 1.2.16   |
 
 ## Slot
 

src/pages/noticeBar/Index.vue

@@ -1,10 +1,10 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-06-13 11:47:12
- * @LastEditTime: 2024-04-09 21:48:26
+ * @LastEditTime: 2024-04-16 13:13:31
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: /wot-design-uni/src/pages/noticeBar/Index.vue
+ * @FilePath: \wot-design-uni\src\pages\noticeBar\Index.vue
  * 记得注释
 -->
 <template>
@@ -66,12 +66,12 @@
       </demo-block>
 
       <demo-block title="多文本轮播">
-        <wd-notice-bar :text="textArray" prefix="check-outline" @next="onNext" />
+        <wd-notice-bar @click="handleClick" :text="textArray" prefix="check-outline" @next="onNext" />
       </demo-block>
 
       <demo-block title="垂直滚动">
-        <wd-notice-bar prefix="warn-bold" direction="vertical" :text="textArray" :delay="3" custom-class="space" />
-        <wd-notice-bar prefix="warn-bold" direction="vertical" text="只有一条消息不会滚动" :delay="3" custom-class="space" />
+        <wd-notice-bar @click="handleClick" prefix="warn-bold" direction="vertical" :text="textArray" :delay="3" custom-class="space" />
+        <wd-notice-bar @click="handleClick" prefix="warn-bold" direction="vertical" text="只有一条消息不会滚动" :delay="3" custom-class="space" />
       </demo-block>
     </view>
   </page-wraper>
@@ -92,6 +92,10 @@ const onNext = (index: number) => {
   console.log('展示下一条，index: ', index)
   console.log('文本是：' + textArray.value[index])
 }
+
+function handleClick(result: { text: string; index: number }) {
+  console.log(result)
+}
 </script>
 <style lang="scss" scoped>
 :deep(.prefix) {

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

@@ -3,7 +3,7 @@
     <wd-icon v-if="prefix" custom-class="wd-notice-bar__prefix" size="18px" :name="prefix"></wd-icon>
     <slot v-else name="prefix"></slot>
     <view class="wd-notice-bar__wrap">
-      <view class="wd-notice-bar__content" :style="animation" @transitionend="animationEnd">
+      <view class="wd-notice-bar__content" :style="animation" @transitionend="animationEnd" @click="handleClick">
         <template v-if="isVertical">
           <view v-for="item in textArray" :key="item">{{ item }}</view>
           <view v-if="textArray.length > 1">{{ textArray[0] }}</view>
@@ -28,14 +28,14 @@ export default {
 
 <script lang="ts" setup>
 import { ref, watch, nextTick, computed, getCurrentInstance, type CSSProperties } from 'vue'
-import { getRect, isDef, objToStyle } from '../common/util'
+import { getRect, isArray, isDef, objToStyle } from '../common/util'
 import { noticeBarProps } from './types'
 
 const $wrap = '.wd-notice-bar__wrap'
 const $content = '.wd-notice-bar__content'
 
 const props = defineProps(noticeBarProps)
-const emit = defineEmits(['close', 'next'])
+const emit = defineEmits(['close', 'next', 'click'])
 
 const wrapWidth = ref<number>(0)
 const show = ref<boolean>(true)
@@ -185,6 +185,19 @@ function animationEnd() {
     clearTimeout(timer)
   }, 20)
 }
+
+function handleClick() {
+  const result = isArray(props.text)
+    ? {
+        index: currentIndex.value,
+        text: props.text[currentIndex.value]
+      }
+    : {
+        index: 0,
+        text: props.text
+      }
+  emit('click', result)
+}
 </script>
 
 <style lang="scss" scoped>