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.

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: mobile-vue升级noticeBar组件 #522

Merged
merged 2 commits into from
Jan 13, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Binary file modified db/TDesign.db
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,20 @@ name | type | default | description | required
-- | -- | -- | -- | --
content | String / Array / Slot / Function | - | Typescript:`string \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
direction | String | horizontal | options: horizontal/vertical | N
interval | Number | 2000 | \- | N
marquee | Boolean / Object | false | Typescript:`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N
operation | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
prefixIcon | Boolean / Slot / Function | true | Typescript:`Boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
theme | String | info | options: info/success/warning/error | N
visible | Boolean | false | `v-model` and `v-model:visible` is supported | N
defaultVisible | Boolean | false | uncontrolled property | N
onChange | Function | | Typescript:`(current: number, source: '' \| 'autoplay' \| 'touch') => void`<br/> | N
onClick | Function | | Typescript:`(trigger: NoticeBarTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/> | N

### NoticeBar Events

name | params | description
-- | -- | --
change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | \-
click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,20 @@
-- | -- | -- | -- | --
content | String / Array / Slot / Function | - | 文本内容。TS 类型:`string \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
direction | String | horizontal | 滚动方向。可选项:horizontal/vertical | N
interval | Number | 2000 | 间隔时间【仅在 direction='vertical' 有效】 | N
marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制;loop 指循环播放次数,值为 -1 表示循环播放,值为 0 表示不循环播放;delay 表示延迟多久开始播放。TS 类型:`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N
operation | String / Slot / Function | - | 右侧额外信息。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
prefixIcon | Boolean / Slot / Function | true | 用于自定义公告栏前面的图标,优先级大于 theme 设定的图标。值为 false 则不显示图标,值为 true 显示 theme 设定图标。TS 类型:`Boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
suffixIcon | Slot / Function | - | 后缀图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
theme | String | info | 内置主题。可选项:info/success/warning/error | N
visible | Boolean | false | 显示/隐藏。支持语法糖 `v-model` 或 `v-model:visible` | N
defaultVisible | Boolean | false | 显示/隐藏。非受控属性 | N
onChange | Function | | TS 类型:`(current: number, source: '' \| 'autoplay' \| 'touch') => void`<br/>当 `direction="vertical"` 时轮播切换时触发 | N
onClick | Function | | TS 类型:`(trigger: NoticeBarTrigger) => void`<br/>点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/> | N

### NoticeBar Events

名称 | 参数 | 描述
-- | -- | --
change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | 当 `direction="vertical"` 时轮播切换时触发
click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@ export default {
return ['horizontal', 'vertical'].includes(val);
},
},
/** 间隔时间【仅在 direction='vertical' 有效】 */
interval: {
type: Number,
default: 2000,
},
/** 跑马灯效果。speed 指速度控制;loop 指循环播放次数,值为 -1 表示循环播放,值为 0 表示不循环播放;delay 表示延迟多久开始播放 */
marquee: {
type: [Boolean, Object] as PropType<TdNoticeBarProps['marquee']>,
Expand Down Expand Up @@ -59,6 +64,8 @@ export default {
},
/** 显示/隐藏,非受控属性 */
defaultVisible: Boolean,
/** 当 `direction="vertical"` 时轮播切换时触发 */
onChange: Function as PropType<TdNoticeBarProps['onChange']>,
/** 点击事件 */
onClick: Function as PropType<TdNoticeBarProps['onClick']>,
};
9 changes: 9 additions & 0 deletions packages/products/tdesign-mobile-vue/src/notice-bar/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ export interface TdNoticeBarProps {
* @default horizontal
*/
direction?: 'horizontal' | 'vertical';
/**
* 间隔时间【仅在 direction='vertical' 有效】
* @default 2000
*/
interval?: number;
/**
* 跑马灯效果。speed 指速度控制;loop 指循环播放次数,值为 -1 表示循环播放,值为 0 表示不循环播放;delay 表示延迟多久开始播放
* @default false
Expand Down Expand Up @@ -54,6 +59,10 @@ export interface TdNoticeBarProps {
* @default false
*/
modelValue?: boolean;
/**
* 当 `direction="vertical"` 时轮播切换时触发
*/
onChange?: (current: number, source: '' | 'autoplay' | 'touch') => void;
/**
* 点击事件
*/
Expand Down
8 changes: 6 additions & 2 deletions packages/scripts/api.json
Original file line number Diff line number Diff line change
Expand Up @@ -75759,6 +75759,7 @@
{
"id": 1712057349,
"platform_framework": [
"8",
"64"
],
"component": "NoticeBar",
Expand All @@ -75777,7 +75778,7 @@
"update_time": "2024-04-02 11:29:09",
"event_output": null,
"custom_field_type": null,
"syntactic_sugar": null,
"syntactic_sugar": "",
"readonly": 1,
"html_attribute": 0,
"trigger_elements": "",
Expand All @@ -75787,6 +75788,7 @@
"support_default_value": 0,
"field_category_text": "Props",
"platform_framework_text": [
"Vue(Mobile)",
"Miniprogram"
],
"field_type_text": [
Expand Down Expand Up @@ -76247,6 +76249,7 @@
{
"id": 1712057632,
"platform_framework": [
"8",
"64"
],
"component": "NoticeBar",
Expand All @@ -76263,7 +76266,7 @@
"update_time": "2024-04-02 11:33:52",
"event_output": null,
"custom_field_type": null,
"syntactic_sugar": null,
"syntactic_sugar": "",
"readonly": 1,
"html_attribute": 0,
"trigger_elements": "",
Expand All @@ -76273,6 +76276,7 @@
"support_default_value": 0,
"field_category_text": "Events",
"platform_framework_text": [
"Vue(Mobile)",
"Miniprogram"
],
"field_type_text": []
Expand Down
Loading