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(notice-bar): feat: 【Vue: Noticebar】新增 interval 属性 和 change 事件 #1718

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
+43 −2
Open

feat(notice-bar): feat: 【Vue: Noticebar】新增 interval 属性 和 change 事件 #1718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
89b48bf
feat(notice-bar): feat: 【Vue: Noticebar】新增 interval 属性 和 change 事件
zhangyingxuan Jan 9, 2025
d15d695
fix: 解决点击notice-bar 时触发swipper 组件stopAutoplay的问题
zhangyingxuan Jan 15, 2025
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
5 changes: 4 additions & 1 deletion src/notice-bar/demos/scrolling.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<t-notice-bar class="notice-bar-demo-block" visible :prefix-icon="false" marquee :content="content" />
<t-notice-bar class="notice-bar-demo-block" visible marquee :content="content" />
<t-notice-bar visible marquee :content="content1" direction="vertical">
<t-notice-bar visible marquee :content="content1" direction="vertical" :interval="3000" @change="onChange">
<template #prefixIcon>
<SoundIcon />
</template>
Expand All @@ -14,4 +14,7 @@ import { SoundIcon } from 'tdesign-icons-vue-next';

const content = ref<string>('提示文字描述提示文字描述提示文字描述提示文字描述文');
const content1 = ref(['君不见', '高堂明镜悲白发', '朝如青丝暮成雪', '人生得意须尽欢', '莫使金樽空对月']);
const onChange = (value: string, options: any) => {
console.log(value, options);
};
</script>
2 changes: 2 additions & 0 deletions src/notice-bar/notice-bar.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ 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
Expand All @@ -21,6 +22,7 @@ onClick | Function | | Typescript：`(trigger: NoticeBarTrigger) => void`<br/>[

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/>

### CSS Variables
Expand Down
2 changes: 2 additions & 0 deletions src/notice-bar/notice-bar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
-- | -- | -- | -- | --
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
Expand All @@ -21,6 +22,7 @@ onClick | Function | | TS 类型：`(trigger: NoticeBarTrigger) => void`<br/>

名称 | 参数 | 描述
-- | -- | --
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/>

### CSS Variables
Expand Down
4 changes: 4 additions & 0 deletions src/notice-bar/notice-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const iconDefault = {
export default defineComponent({
name: `${prefix}-notice-bar`,
props,
emits: ['change'],
setup(props) {
const noticeBarClass = usePrefixClass('notice-bar');
const renderTNodeJSX = useTNodeJSX();
Expand Down Expand Up @@ -172,10 +173,13 @@ export default defineComponent({
<div>
<TSwiper
autoplay
touchStopAutoplay={false}
loop
direction="vertical"
duration={2000}
height={22}
interval={props?.interval}
onChange={props?.onChange}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

通过 touch 上下翻页时，autoplay 会失效。 辛苦有空继续跟进处理一下～

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

swiper组件添加touchStopAutoplay属性控制点击时，autoplay失效问题

class={`${noticeBarClass.value}__content--vertical`}
>
{props.content.map((item, index) => (
Expand Down
7 changes: 7 additions & 0 deletions src/notice-bar/props.ts
View file
Open in desktop
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,
value: 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,
/** 轮播切换时触发 */
onChange: Function as PropType<TdNoticeBarProps['onChange']>,
/** 点击事件 */
onClick: Function as PropType<TdNoticeBarProps['onClick']>,
};
14 changes: 14 additions & 0 deletions src/notice-bar/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ export interface TdNoticeBarProps {
* @default horizontal
*/
direction?: 'horizontal' | 'vertical';
/**
* 间隔时间【仅在 direction='vertical' 有效】
* @default 2000
*/
interval?: {
type: NumberConstructor;
value?: number;
};
/**
* 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放
* @default false
Expand Down Expand Up @@ -58,6 +66,10 @@ export interface TdNoticeBarProps {
* 点击事件
*/
onClick?: (trigger: NoticeBarTrigger) => void;
/**
* 轮播切换时触发
*/
onChange?: (current: number, context: { source: NoticeBarChangeSource }) => void;
}

export interface NoticeBarMarquee {
Expand All @@ -67,3 +79,5 @@ export interface NoticeBarMarquee {
}

export type NoticeBarTrigger = 'prefix-icon' | 'content' | 'operation' | 'suffix-icon';

export type NoticeBarChangeSource = 'autoplay' | 'touch' | 'nav';
5 changes: 5 additions & 0 deletions src/swiper/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,11 @@ export default {
type: Boolean as PropType<TdSwiperProps['disabled']>,
default: false,
},
/** 点击轮播项时停止自动播放 */
touchStopAutoplay: {
type: Boolean as PropType<TdSwiperProps['touchStopAutoplay']>,
default: true,
},
/** 轮播切换时触发 */
onChange: Function as PropType<TdSwiperProps['onChange']>,
/** 点击轮播项时触发 */
Expand Down
2 changes: 1 addition & 1 deletion src/swiper/swiper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default defineComponent({
const { lengthX, lengthY } = useSwipe(swiperContainer, {
onSwipeStart() {
if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
stopAutoplay();
props?.touchStopAutoplay && stopAutoplay();
},
onSwipe(e: TouchEvent) {
if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
Expand Down
4 changes: 4 additions & 0 deletions src/swiper/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ export interface TdSwiperProps {
onClick?: (index: number) => void;
/** 是否禁用 */
disabled?: Boolean;
/**
* 点击轮播项时停止自动播放
*/
touchStopAutoplay?: Boolean;
}

export interface SwiperNavigation {
Expand Down