feat(bulletin-board): [bulletin-board] Add click events #2143 (#2601)

* feat(bulletin-board): [bulletin-board] Add click events * feat(bulletin-board): [bulletin-board] Add click events * feat(bulletin-board): [bulletin-board] Add click events
opentiny · Dec 3, 2024 · 070997f · 070997f
1 parent ac4e4cf
commit 070997f
Show file tree

Hide file tree

Showing 9 changed files with 271 additions and 9 deletions.
diff --git a/examples/sites/demos/apis/bulletin-board.js b/examples/sites/demos/apis/bulletin-board.js
@@ -18,11 +18,12 @@ export default {
         },
         {
           name: 'data',
-          type: 'Array',
+          typeAnchorName: 'BulletinBoardData',
+          type: 'BulletinBoardData[]',
           defaultValue: '',
           desc: {
-            'zh-CN': 'tab-item 数据;tab-item 数据',
-            'en-US': 'tab-item data; tab-item data'
+            'zh-CN': 'tab-item 数据;',
+            'en-US': 'tab-item data;'
           },
           mode: ['pc'],
           pcDemo: 'base'
@@ -87,9 +88,38 @@ export default {
           pcDemo: 'title'
         }
       ],
-      events: [],
+      events: [
+        {
+          name: 'contentClick',
+          type: '(event: BulletinBoardData) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '当公告牌内容被点击时触发的回调函数',
+            'en-US': 'The callback function triggered when the content of the bulletin board is clicked'
+          },
+          mode: ['pc'],
+          pcDemo: 'events',
+          meta: {
+            stable: '3.20.0'
+          }
+        }
+      ],
       methods: [],
       slots: []
     }
+  ],
+  types: [
+    {
+      name: 'BulletinBoardData',
+      type: 'interface',
+      code: `
+            interface BulletinBoardData {
+              text: string // 显示文本
+              date: string // 日期
+              url: string // 需要跳转的地址
+              target: string // <a> 标签的一个属性，该属性指定在何处显示链接的资源
+              }
+            `
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue
@@ -0,0 +1,95 @@
+<template>
+  <tiny-bulletin-board :tab-title="tabTitle" :data="data" @contentClick="contentClick"></tiny-bulletin-board>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyBulletinBoard, TinyModal } from '@opentiny/vue'
+
+const tabTitle = ref(['TINY 更新日志', '他们都在用', 'TINY 特性'])
+const data = ref([
+  [
+    {
+      text: 'TINY v2.1.4 版本',
+      date: '2019-07-31',
+      url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
+    },
+    {
+      text: 'TINY v2.1.3 版本',
+      date: '2019-06-11',
+      url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
+    },
+    {
+      text: 'TINY v2.1.2 版本',
+      date: '2019-05-11',
+      url: 'localhost:3000/#/webcore/zh-CN/guide/changelog',
+      target: '_blank'
+    }
+  ],
+  [
+    {
+      text: 'SRM 采购云',
+      date: '2018-09-11',
+      url: 'http://abcdf.com',
+      target: '_blank'
+    },
+    {
+      text: 'iSales',
+      url: 'http://abcdf.com',
+      date: '2018-09-11',
+      route: 'Alert'
+    },
+    {
+      text: '数易平台',
+      url: 'http://abcdf.com',
+      date: '2018-09-11'
+    },
+    {
+      text: 'MES+ 制造平台',
+      date: '2018-09-11',
+      url: 'http://abcdf.com',
+      target: '_blank'
+    },
+    {
+      text: 'ISDP',
+      date: '2018-09-11',
+      url: 'http://abcdf.com',
+      route: 'Alert'
+    },
+    {
+      text: '财经智慧助手',
+      url: 'http://abcdf.com',
+      date: '2018-09-11'
+    }
+  ],
+  [
+    {
+      text: '秒级系统体验，按需打包；一致 UX 体验规范',
+      date: '2018-09-11',
+      url: '',
+      target: '_blank'
+    },
+    {
+      text: '内置公共 API 并支持扩展；组件、主题均可扩展',
+      date: '2018-09-11',
+      url: ''
+    },
+    {
+      text: '丰富教程案例、FAQ、开源组件快速引入',
+      date: '2018-09-11',
+      url: ''
+    },
+    {
+      text: '内置 80+ web 组件拿来即用；内置 mock, UI 组件库与后端服务自由组合',
+      url: '',
+      date: '2018-09-11'
+    }
+  ]
+])
+function contentClick(item) {
+  TinyModal.message({
+    message: '触发 contentClick 事件：内容为' + item.text,
+    status: 'info'
+  })
+}
+</script>
diff --git a/examples/sites/demos/pc/app/bulletin-board/events.spec.ts b/examples/sites/demos/pc/app/bulletin-board/events.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('测试点击事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('bulletin-board#events')
+  const demo = page.locator('#events')
+  const modal = page.locator('.tiny-modal')
+
+  await demo.getByRole('link', { name: 'TINY v2.1.3 版本' }).click()
+  await expect(modal.getByText('click 事件：内容为TINY v2.1.3 版本')).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/bulletin-board/events.vue b/examples/sites/demos/pc/app/bulletin-board/events.vue
@@ -0,0 +1,105 @@
+<template>
+  <tiny-bulletin-board :tab-title="tabTitle" :data="data" @contentClick="contentClick"></tiny-bulletin-board>
+</template>
+
+<script>
+import { TinyBulletinBoard, TinyModal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBulletinBoard
+  },
+  data() {
+    return {
+      tabTitle: ['TINY 更新日志', '他们都在用', 'TINY 特性'],
+      data: [
+        [
+          {
+            text: 'TINY v2.1.4 版本',
+            date: '2019-07-31',
+            url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
+          },
+          {
+            text: 'TINY v2.1.3 版本',
+            date: '2019-06-11',
+            url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
+          },
+          {
+            text: 'TINY v2.1.2 版本',
+            date: '2019-05-11',
+            url: 'localhost:3000/#/webcore/zh-CN/guide/changelog',
+            target: '_blank'
+          }
+        ],
+        [
+          {
+            text: 'SRM 采购云',
+            date: '2018-09-11',
+            url: 'http://abcdf.com',
+            target: '_blank'
+          },
+          {
+            text: 'iSales',
+            url: 'http://abcdf.com',
+            date: '2018-09-11',
+            route: 'Alert'
+          },
+          {
+            text: '数易平台',
+            url: 'http://abcdf.com',
+            date: '2018-09-11'
+          },
+          {
+            text: 'MES+ 制造平台',
+            date: '2018-09-11',
+            url: 'http://abcdf.com',
+            target: '_blank'
+          },
+          {
+            text: 'ISDP',
+            date: '2018-09-11',
+            url: 'http://abcdf.com',
+            route: 'Alert'
+          },
+          {
+            text: '财经智慧助手',
+            url: 'http://abcdf.com',
+            date: '2018-09-11'
+          }
+        ],
+        [
+          {
+            text: '秒级系统体验，按需打包；一致 UX 体验规范',
+            date: '2018-09-11',
+            url: '',
+            target: '_blank'
+          },
+          {
+            text: '内置公共 API 并支持扩展；组件、主题均可扩展',
+            date: '2018-09-11',
+            url: ''
+          },
+          {
+            text: '丰富教程案例、FAQ、开源组件快速引入',
+            date: '2018-09-11',
+            url: ''
+          },
+          {
+            text: '内置 80+ web 组件拿来即用；内置 mock, UI 组件库与后端服务自由组合',
+            url: '',
+            date: '2018-09-11'
+          }
+        ]
+      ]
+    }
+  },
+  methods: {
+    contentClick(item) {
+      TinyModal.message({
+        message: '触发 contentClick 事件：内容为' + item.text,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js b/examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js
@@ -104,6 +104,18 @@ export default {
         'en-US': '<p>You can use <code>icon</code> to customize the new bulletin prefix icon. </p>\n'
       },
       codeFiles: ['icon.vue']
+    },
+    {
+      demoId: 'events',
+      name: {
+        'zh-CN': '事件',
+        'en-US': 'Fold panel click event'
+      },
+      desc: {
+        'zh-CN': '<p>当点击内容后会触发 <code>contentClick</code> 事件。</p>',
+        'en-US': '<p>When clicked, it will trigger <code>contentClick</code> . </p>'
+      },
+      codeFiles: ['events.vue']
     }
   ]
 }
diff --git a/packages/renderless/src/bulletin-board/index.ts b/packages/renderless/src/bulletin-board/index.ts
@@ -34,3 +34,9 @@ export const computedMoreLink =
     }
     return props.moreLink
   }
+
+export const handleBulletinBoardClick =
+  ({ emit }) =>
+  (item) => {
+    emit('contentClick', item)
+  }
diff --git a/packages/renderless/src/bulletin-board/vue.ts b/packages/renderless/src/bulletin-board/vue.ts
@@ -10,11 +10,11 @@
  *
  */
 
-import { getRoute, computedDataList, computedMoreLink } from './index'
+import { getRoute, computedDataList, computedMoreLink, handleBulletinBoardClick } from './index'
 
-export const api = ['state', 'getRoute']
+export const api = ['state', 'getRoute', 'handleBulletinBoardClick']
 
-export const renderless = (props, { reactive, computed, watch }) => {
+export const renderless = (props, { reactive, computed, watch }, { emit }) => {
   const api = {}
   const state = reactive({
     actName: props.activeName,
@@ -34,7 +34,8 @@ export const renderless = (props, { reactive, computed, watch }) => {
     state,
     getRoute,
     computedDataList: computedDataList({ props, state }),
-    computedMoreLink: computedMoreLink({ props })
+    computedMoreLink: computedMoreLink({ props }),
+    handleBulletinBoardClick: handleBulletinBoardClick({ emit })
   })
 
   return api

diff --git a/packages/theme/src/bulletin-board/index.less b/packages/theme/src/bulletin-board/index.less
@@ -31,6 +31,7 @@
       white-space: normal;
       line-height: initial;
       font-weight: var(--tv-BulletinBoard-item-title-font-weight);
+      cursor: pointer;
 
       &,
       &:hover {

diff --git a/packages/vue/src/bulletin-board/src/pc.vue b/packages/vue/src/bulletin-board/src/pc.vue
@@ -25,13 +25,14 @@
               :target="subItem.target"
               class="tiny-bulletin-board__textTitle"
               rel="noopener noreferrer"
+              @click="handleBulletinBoardClick(subItem)"
             >
               {{ subItem.text }}
               <span v-if="subIndex === 0" class="tiny-bulletin-board__new">
                 <component :is="icon" class="tiny-svg-size" />{{ icon ? '' : 'NEW' }}
               </span>
             </a>
-            <span v-else class="tiny-bulletin-board__textTitle">
+            <span v-else class="tiny-bulletin-board__textTitle" @click="handleBulletinBoardClick(subItem)">
               {{ subItem.text }}
               <span v-if="subIndex === 0" class="tiny-bulletin-board__new">
                 <component :is="icon" class="tiny-svg-size" />{{ icon ? '' : 'NEW' }}