Skip to content

Commit 070997f

Browse files
wuyiping0628wuyiping0628
authored
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
1 parent ac4e4cf commit 070997f

File tree

9 files changed

+271
-9
lines changed

9 files changed

+271
-9
lines changed

‎examples/sites/demos/apis/bulletin-board.js‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,12 @@ export default {
1818
},
1919
{
2020
name: 'data',
21-
type: 'Array',
21+
typeAnchorName: 'BulletinBoardData',
22+
type: 'BulletinBoardData[]',
2223
defaultValue: '',
2324
desc: {
24-
'zh-CN': 'tab-item 数据;tab-item 数据',
25-
'en-US': 'tab-item data; tab-item data'
25+
'zh-CN': 'tab-item 数据;',
26+
'en-US': 'tab-item data;'
2627
},
2728
mode: ['pc'],
2829
pcDemo: 'base'
@@ -87,9 +88,38 @@ export default {
8788
pcDemo: 'title'
8889
}
8990
],
90-
events: [],
91+
events: [
92+
{
93+
name: 'contentClick',
94+
type: '(event: BulletinBoardData) => void',
95+
defaultValue: '',
96+
desc: {
97+
'zh-CN': '当公告牌内容被点击时触发的回调函数',
98+
'en-US': 'The callback function triggered when the content of the bulletin board is clicked'
99+
},
100+
mode: ['pc'],
101+
pcDemo: 'events',
102+
meta: {
103+
stable: '3.20.0'
104+
}
105+
}
106+
],
91107
methods: [],
92108
slots: []
93109
}
110+
],
111+
types: [
112+
{
113+
name: 'BulletinBoardData',
114+
type: 'interface',
115+
code: `
116+
interface BulletinBoardData {
117+
text: string // 显示文本
118+
date: string // 日期
119+
url: string // 需要跳转的地址
120+
target: string // <a> 标签的一个属性，该属性指定在何处显示链接的资源
121+
}
122+
`
123+
}
94124
]
95125
}

‎examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<tiny-bulletin-board :tab-title="tabTitle" :data="data" @contentClick="contentClick"></tiny-bulletin-board>
3+
</template>
4+
5+
<script setup>
6+
import { ref } from 'vue'
7+
import { TinyBulletinBoard, TinyModal } from '@opentiny/vue'
8+
9+
const tabTitle = ref(['TINY 更新日志', '他们都在用', 'TINY 特性'])
10+
const data = ref([
11+
[
12+
{
13+
text: 'TINY v2.1.4 版本',
14+
date: '2019-07-31',
15+
url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
16+
},
17+
{
18+
text: 'TINY v2.1.3 版本',
19+
date: '2019-06-11',
20+
url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
21+
},
22+
{
23+
text: 'TINY v2.1.2 版本',
24+
date: '2019-05-11',
25+
url: 'localhost:3000/#/webcore/zh-CN/guide/changelog',
26+
target: '_blank'
27+
}
28+
],
29+
[
30+
{
31+
text: 'SRM 采购云',
32+
date: '2018-09-11',
33+
url: 'http://abcdf.com',
34+
target: '_blank'
35+
},
36+
{
37+
text: 'iSales',
38+
url: 'http://abcdf.com',
39+
date: '2018-09-11',
40+
route: 'Alert'
41+
},
42+
{
43+
text: '数易平台',
44+
url: 'http://abcdf.com',
45+
date: '2018-09-11'
46+
},
47+
{
48+
text: 'MES+ 制造平台',
49+
date: '2018-09-11',
50+
url: 'http://abcdf.com',
51+
target: '_blank'
52+
},
53+
{
54+
text: 'ISDP',
55+
date: '2018-09-11',
56+
url: 'http://abcdf.com',
57+
route: 'Alert'
58+
},
59+
{
60+
text: '财经智慧助手',
61+
url: 'http://abcdf.com',
62+
date: '2018-09-11'
63+
}
64+
],
65+
[
66+
{
67+
text: '秒级系统体验，按需打包；一致 UX 体验规范',
68+
date: '2018-09-11',
69+
url: '',
70+
target: '_blank'
71+
},
72+
{
73+
text: '内置公共 API 并支持扩展；组件、主题均可扩展',
74+
date: '2018-09-11',
75+
url: ''
76+
},
77+
{
78+
text: '丰富教程案例、FAQ、开源组件快速引入',
79+
date: '2018-09-11',
80+
url: ''
81+
},
82+
{
83+
text: '内置 80+ web 组件拿来即用；内置 mock, UI 组件库与后端服务自由组合',
84+
url: '',
85+
date: '2018-09-11'
86+
}
87+
]
88+
])
89+
function contentClick(item) {
90+
TinyModal.message({
91+
message: '触发 contentClick 事件：内容为' + item.text,
92+
status: 'info'
93+
})
94+
}
95+
</script>

‎examples/sites/demos/pc/app/bulletin-board/events.spec.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('测试点击事件', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('bulletin-board#events')
6+
const demo = page.locator('#events')
7+
const modal = page.locator('.tiny-modal')
8+
9+
await demo.getByRole('link', { name: 'TINY v2.1.3 版本' }).click()
10+
await expect(modal.getByText('click 事件：内容为TINY v2.1.3 版本')).toBeVisible()
11+
})

‎examples/sites/demos/pc/app/bulletin-board/events.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<tiny-bulletin-board :tab-title="tabTitle" :data="data" @contentClick="contentClick"></tiny-bulletin-board>
3+
</template>
4+
5+
<script>
6+
import { TinyBulletinBoard, TinyModal } from '@opentiny/vue'
7+
8+
export default {
9+
components: {
10+
TinyBulletinBoard
11+
},
12+
data() {
13+
return {
14+
tabTitle: ['TINY 更新日志', '他们都在用', 'TINY 特性'],
15+
data: [
16+
[
17+
{
18+
text: 'TINY v2.1.4 版本',
19+
date: '2019-07-31',
20+
url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
21+
},
22+
{
23+
text: 'TINY v2.1.3 版本',
24+
date: '2019-06-11',
25+
url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
26+
},
27+
{
28+
text: 'TINY v2.1.2 版本',
29+
date: '2019-05-11',
30+
url: 'localhost:3000/#/webcore/zh-CN/guide/changelog',
31+
target: '_blank'
32+
}
33+
],
34+
[
35+
{
36+
text: 'SRM 采购云',
37+
date: '2018-09-11',
38+
url: 'http://abcdf.com',
39+
target: '_blank'
40+
},
41+
{
42+
text: 'iSales',
43+
url: 'http://abcdf.com',
44+
date: '2018-09-11',
45+
route: 'Alert'
46+
},
47+
{
48+
text: '数易平台',
49+
url: 'http://abcdf.com',
50+
date: '2018-09-11'
51+
},
52+
{
53+
text: 'MES+ 制造平台',
54+
date: '2018-09-11',
55+
url: 'http://abcdf.com',
56+
target: '_blank'
57+
},
58+
{
59+
text: 'ISDP',
60+
date: '2018-09-11',
61+
url: 'http://abcdf.com',
62+
route: 'Alert'
63+
},
64+
{
65+
text: '财经智慧助手',
66+
url: 'http://abcdf.com',
67+
date: '2018-09-11'
68+
}
69+
],
70+
[
71+
{
72+
text: '秒级系统体验，按需打包；一致 UX 体验规范',
73+
date: '2018-09-11',
74+
url: '',
75+
target: '_blank'
76+
},
77+
{
78+
text: '内置公共 API 并支持扩展；组件、主题均可扩展',
79+
date: '2018-09-11',
80+
url: ''
81+
},
82+
{
83+
text: '丰富教程案例、FAQ、开源组件快速引入',
84+
date: '2018-09-11',
85+
url: ''
86+
},
87+
{
88+
text: '内置 80+ web 组件拿来即用；内置 mock, UI 组件库与后端服务自由组合',
89+
url: '',
90+
date: '2018-09-11'
91+
}
92+
]
93+
]
94+
}
95+
},
96+
methods: {
97+
contentClick(item) {
98+
TinyModal.message({
99+
message: '触发 contentClick 事件：内容为' + item.text,
100+
status: 'info'
101+
})
102+
}
103+
}
104+
}
105+
</script>

‎examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,18 @@ export default {
104104
'en-US': '<p>You can use <code>icon</code> to customize the new bulletin prefix icon. </p>\n'
105105
},
106106
codeFiles: ['icon.vue']
107+
},
108+
{
109+
demoId: 'events',
110+
name: {
111+
'zh-CN': '事件',
112+
'en-US': 'Fold panel click event'
113+
},
114+
desc: {
115+
'zh-CN': '<p>当点击内容后会触发 <code>contentClick</code> 事件。</p>',
116+
'en-US': '<p>When clicked, it will trigger <code>contentClick</code> . </p>'
117+
},
118+
codeFiles: ['events.vue']
107119
}
108120
]
109121
}

‎packages/renderless/src/bulletin-board/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,9 @@ export const computedMoreLink =
3434
}
3535
return props.moreLink
3636
}
37+
38+
export const handleBulletinBoardClick =
39+
({ emit }) =>
40+
(item) => {
41+
emit('contentClick', item)
42+
}

‎packages/renderless/src/bulletin-board/vue.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
*
1111
*/
1212

13-
import { getRoute, computedDataList, computedMoreLink } from './index'
13+
import { getRoute, computedDataList, computedMoreLink, handleBulletinBoardClick } from './index'
1414

15-
export const api = ['state', 'getRoute']
15+
export const api = ['state', 'getRoute', 'handleBulletinBoardClick']
1616

17-
export const renderless = (props, { reactive, computed, watch }) => {
17+
export const renderless = (props, { reactive, computed, watch }, { emit }) => {
1818
const api = {}
1919
const state = reactive({
2020
actName: props.activeName,
@@ -34,7 +34,8 @@ export const renderless = (props, { reactive, computed, watch }) => {
3434
state,
3535
getRoute,
3636
computedDataList: computedDataList({ props, state }),
37-
computedMoreLink: computedMoreLink({ props })
37+
computedMoreLink: computedMoreLink({ props }),
38+
handleBulletinBoardClick: handleBulletinBoardClick({ emit })
3839
})
3940

4041
return api

‎packages/theme/src/bulletin-board/index.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
white-space: normal;
3232
line-height: initial;
3333
font-weight: var(--tv-BulletinBoard-item-title-font-weight);
34+
cursor: pointer;
3435

3536
&,
3637
&:hover {

‎packages/vue/src/bulletin-board/src/pc.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,14 @@
2525
:target="subItem.target"
2626
class="tiny-bulletin-board__textTitle"
2727
rel="noopener noreferrer"
28+
@click="handleBulletinBoardClick(subItem)"
2829
>
2930
{{ subItem.text }}
3031
<span v-if="subIndex === 0" class="tiny-bulletin-board__new">
3132
<component :is="icon" class="tiny-svg-size" />{{ icon ? '' : 'NEW' }}
3233
</span>
3334
</a>
34-
<span v-else class="tiny-bulletin-board__textTitle">
35+
<span v-else class="tiny-bulletin-board__textTitle" @click="handleBulletinBoardClick(subItem)">
3536
{{ subItem.text }}
3637
<span v-if="subIndex === 0" class="tiny-bulletin-board__new">
3738
<component :is="icon" class="tiny-svg-size" />{{ icon ? '' : 'NEW' }}

0 commit comments

Comments
 (0)