Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Dec 3, 2024
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
697ae4e
feat(bulletin-board): [bulletin-board] Add click events
wuyiping0628 Dec 3, 2024
494c225
Merge branch 'dev' of github.com:opentiny/tiny-vue into wyp/bulletin-…
wuyiping0628 Dec 3, 2024
acf1191
feat(bulletin-board): [bulletin-board] Add click events
wuyiping0628 Dec 3, 2024
e57af4d
feat(bulletin-board): [bulletin-board] Add click events
wuyiping0628 Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 31 additions & 4 deletions examples/sites/demos/apis/bulletin-board.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -87,9 +88,35 @@ export default {
pcDemo: 'title'
}
],
events: [],
events: [
{
name: 'click',
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'
}
],
methods: [],
slots: []
}
],
types: [
{
name: 'BulletinBoardData',
type: 'interface',
code: `
interface BulletinBoardData {
text: string // 显示文本
date: string // 日期
url: string // 需要跳转的地址
target: string // <a> 标签的一个属性，该属性指定在何处显示链接的资源
}
`
}
wuyiping0628 marked this conversation as resolved.
Show resolved Hide resolved
]
}
95 changes: 95 additions & 0 deletions examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<template>
<tiny-bulletin-board :tab-title="tabTitle" :data="data" @handleClick="handleClick"></tiny-bulletin-board>
wuyiping0628 marked this conversation as resolved.
Show resolved Hide resolved
</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'
wuyiping0628 marked this conversation as resolved.
Show resolved Hide resolved
},
{
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 handleClick(item) {
TinyModal.message({
message: 'click 事件：内容为' + item.text,
status: 'info'
})
}
</script>
11 changes: 11 additions & 0 deletions examples/sites/demos/pc/app/bulletin-board/events.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
})
105 changes: 105 additions & 0 deletions examples/sites/demos/pc/app/bulletin-board/events.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<template>
<tiny-bulletin-board :tab-title="tabTitle" :data="data" @handleClick="handleClick"></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: {
handleClick(item) {
TinyModal.message({
message: 'click 事件：内容为' + item.text,
status: 'info'
})
}
}
}
</script>
12 changes: 12 additions & 0 deletions examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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': 'click事件',
'en-US': 'Fold panel click event'
},
desc: {
'zh-CN': '<p>当点击后会触发触发 <code>click</code> 事件。</p>',
'en-US': '<p>When clicked, it will trigger<code>click</code>. </p>'
},
codeFiles: ['events.vue']
}
]
}
6 changes: 6 additions & 0 deletions packages/renderless/src/bulletin-board/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,9 @@ export const computedMoreLink =
}
return props.moreLink
}

export const handleBulletinBoardClick =
({ emit }) =>
(item) => {
emit('handleClick', item)
}
9 changes: 5 additions & 4 deletions packages/renderless/src/bulletin-board/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/theme/src/bulletin-board/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
white-space: normal;
line-height: initial;
font-weight: var(--tv-BulletinBoard-item-title-font-weight);
cursor: pointer;

&,
&:hover {
Expand Down
3 changes: 2 additions & 1 deletion packages/vue/src/bulletin-board/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,14 @@
:target="subItem.target"
class="tiny-bulletin-board__textTitle"
rel="noopener noreferrer"
@click.native="handleBulletinBoardClick(subItem)"
wuyiping0628 marked this conversation as resolved.
Show resolved Hide resolved
>
{{ 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.native="handleBulletinBoardClick(subItem)">
{{ subItem.text }}
<span v-if="subIndex === 0" class="tiny-bulletin-board__new">
<component :is="icon" class="tiny-svg-size" />{{ icon ? '' : 'NEW' }}
Expand Down
Loading