From fa5ec94f17cf9516d0acd6da9161aed13b42e923 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BE=99=E9=A3=8E?= <455947455@qq.com> Date: Fri, 12 May 2023 11:18:48 +0800 Subject: [PATCH] refactor(notice-bar): new notice-bar (#654) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: update api * refactor: new notice-bar * test: update snap * docs: update docs * docs: update docs * fix: 修复图标&补充content点击事件 --------- Co-authored-by: anlyyao --- .../__test__/__snapshots__/demo.test.jsx.snap | 2587 ++++++++--------- src/notice-bar/__test__/demo.test.jsx | 6 +- src/notice-bar/demos/base.vue | 10 +- src/notice-bar/demos/custom.vue | 23 +- src/notice-bar/demos/customization.vue | 58 +- src/notice-bar/demos/event.vue | 27 +- src/notice-bar/demos/icon.vue | 11 - src/notice-bar/demos/iconDemo.vue | 3 + src/notice-bar/demos/mobile.vue | 49 +- src/notice-bar/demos/scrolling.vue | 17 +- src/notice-bar/demos/suffixIcon.vue | 11 + src/notice-bar/demos/theme.vue | 22 +- src/notice-bar/notice-bar.en-US.md | 23 + src/notice-bar/notice-bar.md | 15 +- src/notice-bar/notice-bar.vue | 98 +- src/notice-bar/props.ts | 23 +- src/notice-bar/style/index.js | 2 +- src/notice-bar/type.ts | 22 +- 18 files changed, 1484 insertions(+), 1523 deletions(-) delete mode 100644 src/notice-bar/demos/icon.vue create mode 100644 src/notice-bar/demos/iconDemo.vue create mode 100644 src/notice-bar/demos/suffixIcon.vue create mode 100644 src/notice-bar/notice-bar.en-US.md diff --git a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap index e7358c516..9a40af1cb 100644 --- a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap @@ -2,531 +2,376 @@ exports[`NoticeBar > NoticeBar baseVue demo works fine 1`] = `
+
+ +
+ +
- -
-
-
- - 提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- + +
+ +
`; exports[`NoticeBar > NoticeBar customVue demo works fine 1`] = `
+
-
-
- - - - - - -
-
-
-
- - 提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- -
+ + + +
-
-`; - -exports[`NoticeBar > NoticeBar customizationVue demo works fine 1`] = ` -
+
- -
-
-
- - 提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- + +
+
-
-
- - - -
-
-
-
- - 提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- -
+ + +
+
+`; + +exports[`NoticeBar > NoticeBar customizationVue demo works fine 1`] = ` +
+
-
-
- - - -
-
-
-
- - 提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 - - 详情 - - -
-
-
-
- - - -
-
+ +
- +
-
- - - -
-
-
-
- - - 提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 - - 详情 - - - - - - -
-
-
-
- - - + + + + 详情 + + + + -
+
+ +
+ + + + + +
`; exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = `
+
+
-
- - - -
+ + +
+ +
-
-
+ - 提示文字描述提示文字描述提示文字描述 - - - + + 详情 + -
-
+ + + +
-
+ +
+ - - - -
+ +
+
-
- - - -
+ + +
+ +
-
-
- - 提示文字描述提示文字描述 - - 详情 - - -
-
+ +
-
+ +
+ - - - -
+ +
+
`; -exports[`NoticeBar > NoticeBar iconVue demo works fine 1`] = ` +exports[`NoticeBar > NoticeBar iconDemoVue demo works fine 1`] = `
+
+ + + +
+ +
-
- - - -
-
-
-
- - 提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- + +
+ +
`; exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
+

+ NoticeBar 公告栏 +

+

+ 在导航栏下方，用于给用户显示提示消息。 +

@@ -536,12 +381,12 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `

- 01 类型 + 01 组件类型

- 静态消息公告栏 + 纯文字的公告栏

NoticeBar mobileVue demo works fine 1`] = ` >
+ +
+ +
+
- -
-
-
- - 提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- + +
+ +
@@ -598,7 +434,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `

- 带图标静态公告栏 + 带图标的公告栏

NoticeBar mobileVue demo works fine 1`] = ` >
+ +
+ + + +
+
-
- - - -
-
-
-
- - 提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- + +
+ +
@@ -671,7 +494,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `

- 带操作公告栏 + 带关闭的公告栏

NoticeBar mobileVue demo works fine 1`] = ` >
+
-
-
- - - -
-
-
-
- - 提示文字描述提示文字描述提示文字描述 - - - - -
-
-
-
- - - -
-
+ +
+
-
- - - -
-
-
-
- - 提示文字描述提示文字描述 - - 详情 - - -
-
-
-
- - - -
+ +
+ +
+ + + + + +
@@ -825,102 +572,145 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `

- 滚动公告栏 + 带入口的公告栏

+
- +
+ + + +
+ +
- -
-
-
+ - - 提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- + + 详情 + + + + + +
- + +
+ + + +
+
+
+ +
+ + + +
+
-
- - - -
-
-
-
- - 提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- + +
+ +
+ + + +
+
NoticeBar mobileVue demo works fine 1`] = `

- 自定义样式 + 自定样式的公告栏

NoticeBar mobileVue demo works fine 1`] = ` >
+ +
+ + + + + + +
+
-
- - - - - - -
-
-
-
- - 提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- + +
+ +
+ + + + + +
-

- 02 状态 -

+

+ 自定义内容的公告栏 +

+
-
-
- - - -
-
-
-
- - 默认状态公告栏默认状态公告栏 - - - - -
-
-
- -
-
-
-
-
- - - -
-
-
-
- - 成功状态公告栏成功状态公告栏 - - - - -
-
-
- -
+ +
+
-
- - - -
-
-
-
+ - - 警示状态公告栏警示状态公告栏 - - - - -
-
-
- + + 详情 + + + + + +
+
-
-
- - - -
-
-
-
- - 错误状态公告栏错误状态公告栏 - - - - -
-
-
- -
+ + +
@@ -1232,239 +902,383 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `

- 03 多行文字公告栏 + 02 组件状态

- +

+ 公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error） +

-
+ +
+
-
- -
-
-
- - 提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- -
+ +
+
-
- - - -
-
-
-
- - 提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 - - - - -
-
-
- + +
+ + +
+
+
-
-
+ +
+ +
+
+ 成功状态公告栏成功状态公告栏 + - - - -
-
+ +
+
+ + +
+
+ +
+ + + +
+ +
+
+ 警示状态公告栏警示状态公告栏 + -
-
- - 提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 - - 详情 - - -
-
-
-
+ +
+
+ + +
+
+ +
+ + + +
+ +
+
+ 错误状态公告栏错误状态公告栏 + - - - -
+ +
- + + +
+ + +
+
+
+
+

+ 02 可 滚动的公告栏 +

+

+ 可滚动公告栏有水平 (horizontal) 和垂直 (vertical) +

+
+
+ + +
+ +
+ +
+
-
- - - -
+ + +
+
+ + +
+
+ +
+ + + +
+ +
+
+ 提示文字描述提示文字描述提示文字描述提示文字描述文 + + + +
+
+ + +
+
+ +
+ + + + + + +
+ +
+
+ + +
+ +
+ 君不见 +
+ +
+
+ +
+ 高堂明镜悲白发 +
+ +
+
+ +
+ 朝如青丝暮成雪 +
+ +
+
+ +
+ 人生得意须尽欢 +
+ +
- - - 提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 - - 详情 - - - - - - + 莫使金樽空对月 +
+
+ +
-
-
- - - - - +
+ +
+
@@ -1472,294 +1286,415 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = ` exports[`NoticeBar > NoticeBar scrollingVue demo works fine 1`] = `
- +
+
+ +
+ +
-
-
-
- - 提示文字描述提示文字描述提示文字描述 - - - - -
-
+ +
-
+ +
-
+ +
+ + + +
+
- - - + +
-
+ + +
+
+ +
+ + + + + + +
+ +
+
- - 提示文字描述提示文字描述提示文字描述 - - - - + 君不见 +
+ +
+
+ +
+ 高堂明镜悲白发 +
+ +
+
+ +
+ 朝如青丝暮成雪 +
+ +
+
+ +
+ 人生得意须尽欢 +
+ +
+
+ +
+ 莫使金樽空对月 +
+ +
+ +
+
-
+ + +
+ +
+`; + +exports[`NoticeBar > NoticeBar suffixIconVue demo works fine 1`] = ` +
+ +
+ + + +
+ +
+
+ 这是一条普通的通知信息 + + + +
+
+ +
+ + + + +
`; exports[`NoticeBar > NoticeBar themeVue demo works fine 1`] = `
+
+
-
- - - -
+ + +
+ +
-
-
- - 默认状态公告栏默认状态公告栏 - - - - -
-
+ +
-
+ +
+
-
- - - -
+ + +
+ +
-
-
- - 成功状态公告栏成功状态公告栏 - - - - -
-
+ +
-
+ +
+
-
- - - -
+ + +
+ +
-
-
- - 警示状态公告栏警示状态公告栏 - - - - -
-
+ +
-
+ +
+
-
- - - -
+ + +
+ +
-
-
- - 错误状态公告栏错误状态公告栏 - - - - -
-
+ +
-
+ +
+
`; diff --git a/src/notice-bar/__test__/demo.test.jsx b/src/notice-bar/__test__/demo.test.jsx index 6e7d3b667..3eb5bfd88 100644 --- a/src/notice-bar/__test__/demo.test.jsx +++ b/src/notice-bar/__test__/demo.test.jsx @@ -7,9 +7,10 @@ import baseVue from '@/notice-bar/demos/base.vue'; import customVue from '@/notice-bar/demos/custom.vue'; import customizationVue from '@/notice-bar/demos/customization.vue'; import eventVue from '@/notice-bar/demos/event.vue'; -import iconVue from '@/notice-bar/demos/icon.vue'; +import iconDemoVue from '@/notice-bar/demos/iconDemo.vue'; import mobileVue from '@/notice-bar/demos/mobile.vue'; import scrollingVue from '@/notice-bar/demos/scrolling.vue'; +import suffixIconVue from '@/notice-bar/demos/suffixIcon.vue'; import themeVue from '@/notice-bar/demos/theme.vue'; const mapper = { @@ -17,9 +18,10 @@ const mapper = { customVue, customizationVue, eventVue, - iconVue, + iconDemoVue, mobileVue, scrollingVue, + suffixIconVue, themeVue, }; diff --git a/src/notice-bar/demos/base.vue b/src/notice-bar/demos/base.vue index 3d7e585c5..aa1403793 100644 --- a/src/notice-bar/demos/base.vue +++ b/src/notice-bar/demos/base.vue @@ -1,11 +1,3 @@ - diff --git a/src/notice-bar/demos/custom.vue b/src/notice-bar/demos/custom.vue index 1a1f02504..5383e249b 100644 --- a/src/notice-bar/demos/custom.vue +++ b/src/notice-bar/demos/custom.vue @@ -1,25 +1,26 @@ + diff --git a/src/notice-bar/demos/customization.vue b/src/notice-bar/demos/customization.vue index 98518b419..dbc60a30b 100644 --- a/src/notice-bar/demos/customization.vue +++ b/src/notice-bar/demos/customization.vue @@ -1,52 +1,14 @@ - - - diff --git a/src/notice-bar/demos/event.vue b/src/notice-bar/demos/event.vue index 4a2a8f772..0ac8791b7 100644 --- a/src/notice-bar/demos/event.vue +++ b/src/notice-bar/demos/event.vue @@ -1,19 +1,16 @@ diff --git a/src/notice-bar/demos/iconDemo.vue b/src/notice-bar/demos/iconDemo.vue new file mode 100644 index 000000000..fb09bf528 --- /dev/null +++ b/src/notice-bar/demos/iconDemo.vue @@ -0,0 +1,3 @@ + diff --git a/src/notice-bar/demos/mobile.vue b/src/notice-bar/demos/mobile.vue index 440dc615f..aeeb6c2a9 100644 --- a/src/notice-bar/demos/mobile.vue +++ b/src/notice-bar/demos/mobile.vue @@ -1,35 +1,54 @@ + + diff --git a/src/notice-bar/demos/scrolling.vue b/src/notice-bar/demos/scrolling.vue index 92cdca674..93efa0014 100644 --- a/src/notice-bar/demos/scrolling.vue +++ b/src/notice-bar/demos/scrolling.vue @@ -1,15 +1,18 @@ diff --git a/src/notice-bar/demos/suffixIcon.vue b/src/notice-bar/demos/suffixIcon.vue new file mode 100644 index 000000000..c9d74cbd6 --- /dev/null +++ b/src/notice-bar/demos/suffixIcon.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/notice-bar/demos/theme.vue b/src/notice-bar/demos/theme.vue index de252e9b9..04cfbf8a2 100644 --- a/src/notice-bar/demos/theme.vue +++ b/src/notice-bar/demos/theme.vue @@ -1,10 +1,16 @@ - - diff --git a/src/notice-bar/notice-bar.en-US.md b/src/notice-bar/notice-bar.en-US.md new file mode 100644 index 000000000..cfa265eff --- /dev/null +++ b/src/notice-bar/notice-bar.en-US.md @@ -0,0 +1,23 @@ +:: BASE_DOC :: + +## API +### NoticeBar Props + +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 +marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { 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 | - | Typescript：`Boolean \ | TNode \| Function`。[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 +onClick | Function | | Typescript：`(trigger: NoticeBarTrigger) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
| N + +### NoticeBar Events + +name | params | description +-- | -- | -- +click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
diff --git a/src/notice-bar/notice-bar.md b/src/notice-bar/notice-bar.md index 494ad556b..975820186 100644 --- a/src/notice-bar/notice-bar.md +++ b/src/notice-bar/notice-bar.md @@ -5,20 +5,19 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -content | String / Slot / Function | - | 文本内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N -extra | String / Slot / Function | - | 右侧额外信息。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N -marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean | DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N -prefixIcon | String / Slot / Function | - | 前缀图标。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +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 +marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { 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 | - | 前缀图标。 值为 false 表示不显示前缀图标。TS 类型：`Boolean \ | TNode \ | Function`。[通用类型定义](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 类型：`(value: boolean) => void`
展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏 | N -onClick | Function | | TS 类型：`(trigger: NoticeBarTrigger) => void`
点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' | 'content' | 'extra' | 'suffix-icon';`
| N +onClick | Function | | TS 类型：`(trigger: NoticeBarTrigger) => void`
点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
| N ### NoticeBar Events 名称 | 参数 | 描述 -- | -- | -- -change | `(value: boolean)` | 展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏 -click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' | 'content' | 'extra' | 'suffix-icon';`
+click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
diff --git a/src/notice-bar/notice-bar.vue b/src/notice-bar/notice-bar.vue index 891b15e30..c7e8a74f2 100644 --- a/src/notice-bar/notice-bar.vue +++ b/src/notice-bar/notice-bar.vue @@ -1,32 +1,48 @@ @@ -42,10 +58,9 @@ import { h, getCurrentInstance, watch, - watchEffect, } from 'vue'; -import { InfoCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next'; -import isFunction from 'lodash/isFunction'; +import { InfoCircleFilledIcon, CheckCircleFilledIcon } from 'tdesign-icons-vue-next'; +import { isArray } from 'lodash'; import NoticeBarProps from './props'; import { NoticeBarTrigger, DrawMarquee } from './type'; import config from '../config'; @@ -57,13 +72,13 @@ const iconDefault = { info: h(InfoCircleFilledIcon), success: h(CheckCircleFilledIcon), warning: h(InfoCircleFilledIcon), - error: h(CloseCircleFilledIcon), + error: h(InfoCircleFilledIcon), }; export default defineComponent({ name, components: { TNode }, props: NoticeBarProps, - emits: ['click', 'change'], + emits: ['click'], setup(props, context) { const emitEvent = useEmitEvent(props, context.emit); const internalInstance = getCurrentInstance(); @@ -88,19 +103,21 @@ export default defineComponent({ // prefix-icon const prefixIconContent = computed(() => { let iconContent = null; - if (isFunction(props.prefixIcon) || context.slots.prefixIcon) { + if (typeof props.prefixIcon === 'boolean' && props.prefixIcon === false) { + return; + } + if (props.prefixIcon || context.slots.prefixIcon) { iconContent = renderTNode(internalInstance, 'prefixIcon'); - } else if (props.prefixIcon) { + } else { const key = props.theme as string; iconContent = iconDefault?.[key] || null; } return iconContent; }); - // suffix-icon const suffixIconContent = computed(() => renderTNode(internalInstance, 'suffixIcon')); - // extra - const showExtraText = computed(() => renderTNode(internalInstance, 'extra')); + // operation + const operationContent = computed(() => renderTNode(internalInstance, 'operation')); // content const showContent = computed(() => renderTNode(internalInstance, 'content')); // click @@ -118,12 +135,7 @@ export default defineComponent({ const itemDOM = ref(); const { visible, modelValue } = toRefs(props); - const [isShow, setStatusValue] = useVModel( - visible, - modelValue, - props.defaultVisible, - props.onChange as (value: boolean | undefined) => void, - ); + const [isShow, setStatusValue] = useVModel(visible, modelValue, props.defaultVisible); function handleScrolling() { if (!props?.marquee || (props?.marquee as DrawMarquee)?.loop === 0) { return; @@ -143,7 +155,7 @@ export default defineComponent({ setTimeout(() => { const listDOMWidth = listDOM.value?.getBoundingClientRect().width; const itemDOMWidth = itemDOM.value?.getBoundingClientRect().width; - if (itemDOMWidth > listDOMWidth) { + if (itemDOMWidth >= listDOMWidth) { state.offset = -itemDOMWidth; state.duration = itemDOMWidth / state.scroll.speed; state.listWidth = listDOMWidth; @@ -180,7 +192,6 @@ export default defineComponent({ watch( () => isShow.value, () => { - emitEvent('change', isShow.value); nextTick(() => { if (isShow.value) { state.offset = state.listWidth; @@ -192,13 +203,14 @@ export default defineComponent({ ); return { + isArray, name, ...toRefs(props), ...toRefs(state), rootClasses, prefixIconContent, suffixIconContent, - showExtraText, + operationContent, showContent, isShow, handleClick, diff --git a/src/notice-bar/props.ts b/src/notice-bar/props.ts index 2c4c52072..c2a145652 100644 --- a/src/notice-bar/props.ts +++ b/src/notice-bar/props.ts @@ -10,21 +10,30 @@ import { PropType } from 'vue'; export default { /** 文本内容 */ content: { - type: [String, Function] as PropType, + type: [String, Array, Function] as PropType, }, - /** 右侧额外信息 */ - extra: { - type: [String, Function] as PropType, + /** 滚动方向 */ + direction: { + type: String as PropType, + default: 'horizontal' as TdNoticeBarProps['direction'], + validator(val: TdNoticeBarProps['direction']): boolean { + if (!val) return true; + return ['horizontal', 'vertical'].includes(val); + }, }, /** 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 */ marquee: { type: [Boolean, Object] as PropType, default: false, }, - /** 前缀图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标 */ + /** 右侧额外信息 */ + operation: { + type: [String, Function] as PropType, + }, + /** 前缀图标 */ prefixIcon: { type: [Boolean, Function] as PropType, - default: true, + default: null, }, /** 后缀图标 */ suffixIcon: { @@ -50,8 +59,6 @@ export default { }, /** 显示/隐藏，非受控属性 */ defaultVisible: Boolean, - /** 展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏 */ - onChange: Function as PropType, /** 点击事件 */ onClick: Function as PropType, }; diff --git a/src/notice-bar/style/index.js b/src/notice-bar/style/index.js index 9ce2be112..fc4c44cc3 100644 --- a/src/notice-bar/style/index.js +++ b/src/notice-bar/style/index.js @@ -1 +1 @@ -import '../../_common/style/mobile/components/notice-bar/_index.less'; +import '../../_common/style/mobile/components/notice-bar/v2/_index.less'; diff --git a/src/notice-bar/type.ts b/src/notice-bar/type.ts index a190bb027..b99f4f0f7 100644 --- a/src/notice-bar/type.ts +++ b/src/notice-bar/type.ts @@ -10,21 +10,25 @@ export interface TdNoticeBarProps { /** * 文本内容 */ - content?: string | TNode; + content?: string | string[] | TNode; /** - * 右侧额外信息 + * 滚动方向 + * @default horizontal */ - extra?: string | TNode; + direction?: 'horizontal' | 'vertical'; /** * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 * @default false */ marquee?: boolean | DrawMarquee; /** - * 前缀图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标 - * @default true + * 右侧额外信息 + */ + operation?: string | TNode; + /** + * 前缀图标 */ - prefixIcon?: boolean | TNode; + prefixIcon?: TNode | Boolean; /** * 后缀图标 */ @@ -49,10 +53,6 @@ export interface TdNoticeBarProps { * @default false */ modelValue?: boolean; - /** - * 展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏 - */ - onChange?: (value: boolean) => void; /** * 点击事件 */ @@ -65,4 +65,4 @@ export interface DrawMarquee { delay?: number; } -export type NoticeBarTrigger = 'prefix-icon' | 'content' | 'extra' | 'suffix-icon'; +export type NoticeBarTrigger = 'prefix-icon' | 'content' | 'operation' | 'suffix-icon';