refactor(notice-bar): new notice-bar (Tencent#654)

* feat: update api * refactor: new notice-bar * test: update snap * docs: update docs * docs: update docs * fix: 修复图标&补充content点击事件 --------- Co-authored-by: anlyyao <anly_yaw@163.com>
bitjian · May 12, 2023 · fa5ec94 · fa5ec94
1 parent c8fbdbd
commit fa5ec94
Show file tree

Hide file tree

Showing 18 changed files with 1,484 additions and 1,523 deletions.
diff --git a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
diff --git a/src/notice-bar/__test__/demo.test.jsx b/src/notice-bar/__test__/demo.test.jsx
@@ -7,19 +7,21 @@ 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 = {
   baseVue,
   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
@@ -1,11 +1,3 @@
 <template>
-  <div class="noticebar-demo">
-    <t-notice-bar :visible="visible" :content="content" :prefix-icon="false" />
-  </div>
+  <t-notice-bar visible content="这是一条普通的通知信息" :prefix-icon="false" />
 </template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const content = ref<string>('提示文字描述提示文字描述提示文字描述');
-const visible = ref<boolean>(true);
-</script>
diff --git a/src/notice-bar/demos/custom.vue b/src/notice-bar/demos/custom.vue
@@ -1,25 +1,26 @@
 <template>
-  <div class="noticebar-demo">
-    <t-notice-bar class="cover-class" visible content="提示文字描述提示文字描述提示文字描述">
-      <template #prefixIcon>
-        <sound-icon />
-      </template>
-    </t-notice-bar>
-  </div>
+  <t-notice-bar class="cover-class" visible content="提示文字描述提示文字描述提示文字描述">
+    <template #prefixIcon>
+      <SoundIcon />
+    </template>
+    <template #suffixIcon>
+      <ChevronRightIcon />
+    </template>
+  </t-notice-bar>
 </template>
 
 <script lang="ts" setup>
-import { SoundIcon } from 'tdesign-icons-vue-next';
+import { SoundIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
 </script>
+
 <style lang="less">
-// 覆盖组件内部样式
 .cover-class {
   .t-icon {
-    color: #ffffff !important;
+    color: rgba(0, 0, 0, 0.9) !important;
   }
   .t-notice-bar__text {
     color: #ffffff !important;
   }
-  background-color: #a6a6a6;
+  background-color: rgba(243, 243, 243, 1);
 }
 </style>
diff --git a/src/notice-bar/demos/customization.vue b/src/notice-bar/demos/customization.vue
@@ -1,52 +1,14 @@
 <template>
-  <div>
-    <t-notice-bar
-      visible
-      :prefix-icon="false"
-      content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-    />
-    <t-notice-bar
-      visible
-      content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-      @click="handleClick"
-    />
-    <t-notice-bar
-      visible
-      content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-      extra="详情"
-      :suffix-icon="arrowRight"
-      @click="handleClick"
-    />
-    <!-- slot实现自定义content内容 -->
-    <t-notice-bar visible>
-      <template #content>
-        提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
-        <text class="extra" @click="clickDetail"> 详情 </text>
-      </template>
-      <template #suffixIcon>
-        <CloseIcon />
-      </template>
-    </t-notice-bar>
-  </div>
+  <t-notice-bar visible content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述">
+    <template #operation>
+      <t-link style="margin-left: 2px" theme="primary">详情</t-link>
+    </template>
+    <template #suffixIcon>
+      <CloseIcon />
+    </template>
+  </t-notice-bar>
 </template>
-<script lang="ts" setup>
-import { h } from 'vue';
-import { CloseIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
-import { Toast } from 'tdesign-mobile-vue';
 
-const closeIcon = () => h(CloseIcon);
-const arrowRight = () => h(ChevronRightIcon);
-const handleClick = (context: string) => {
-  Toast(`click:${context}`);
-};
-const clickDetail = () => {
-  Toast(`click detail text`);
-};
+<script lang="ts" setup>
+import { CloseIcon } from 'tdesign-icons-vue-next';
 </script>
-
-<style lang="less">
-.extra {
-  font-weight: 700;
-  text-decoration: underline;
-}
-</style>
diff --git a/src/notice-bar/demos/event.vue b/src/notice-bar/demos/event.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="noticebar-demo">
-    <t-notice-bar
-      visible
-      content="提示文字描述提示文字描述提示文字描述"
-      :suffix-icon="arrowRight"
-      @click="handleClick"
-    />
-    <t-notice-bar
-      visible
-      content="提示文字描述提示文字描述"
-      extra="详情"
-      :suffix-icon="iconFunc"
-      @click="handleClick"
-    />
-  </div>
+  <t-notice-bar
+    visible
+    content="这是一条普通的消息通知"
+    :suffix-icon="arrowRight"
+    class="notice-bar-demo-block"
+    @click="handleClick"
+  >
+    <template #operation>
+      <t-link style="margin-left: 5px" theme="primary">详情</t-link>
+    </template>
+  </t-notice-bar>
+  <t-notice-bar visible content="这是一条普通的通知信息" :suffix-icon="arrowRight" @click="handleClick" />
 </template>
 
 <script lang="ts" setup>

diff --git a/src/notice-bar/demos/icon.vue b/src/notice-bar/demos/icon.vue
diff --git a/src/notice-bar/demos/iconDemo.vue b/src/notice-bar/demos/iconDemo.vue
@@ -0,0 +1,3 @@
+<template>
+  <t-notice-bar visible content="提示文字描述提示文字描述提示文字描述" />
+</template>
diff --git a/src/notice-bar/demos/mobile.vue b/src/notice-bar/demos/mobile.vue
@@ -1,35 +1,54 @@
 <template>
-  <div class="noticebar-demo">
-    <tdesign-demo-block title="01 类型" summary="静态消息公告栏">
+  <div class="tdesign-mobile-demo">
+    <h1 class="title">NoticeBar 公告栏</h1>
+    <p class="summary">在导航栏下方，用于给用户显示提示消息。</p>
+    <tdesign-demo-block title="01 组件类型" summary="纯文字的公告栏">
       <baseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="带图标静态公告栏">
+    <tdesign-demo-block summary="带图标的公告栏">
       <iconDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="带操作公告栏">
-      <eventDemo />
+    <tdesign-demo-block summary="带关闭的公告栏">
+      <suffixIcon />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="滚动公告栏">
-      <scrollDemo />
+    <tdesign-demo-block summary="带入口的公告栏">
+      <event />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="自定义样式">
+    <tdesign-demo-block summary="自定样式的公告栏">
       <customDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 状态">
+    <tdesign-demo-block summary="自定义内容的公告栏">
+      <customizationDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block
+      title="02 组件状态"
+      summary="公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）"
+    >
       <themeDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="03 多行文字公告栏">
-      <customizationDemo />
+    <tdesign-demo-block title="03 可滚动的公告栏" summary="可滚动公告栏有水平 (horizontal) 和垂直 (vertical)">
+      <scrollDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
 <script lang="ts" setup>
 import baseDemo from './base.vue';
-import iconDemo from './icon.vue';
-import eventDemo from './event.vue';
-import scrollDemo from './scrolling.vue';
+import iconDemo from './iconDemo.vue';
+import suffixIcon from './suffixIcon.vue';
+import event from './event.vue';
 import customDemo from './custom.vue';
-import themeDemo from './theme.vue';
 import customizationDemo from './customization.vue';
+import themeDemo from './theme.vue';
+import scrollDemo from './scrolling.vue';
 </script>
+
+<style>
+.tdesign-mobile-demo {
+  background-color: #fff;
+}
+
+.notice-bar-demo-block {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/notice-bar/demos/scrolling.vue b/src/notice-bar/demos/scrolling.vue
@@ -1,15 +1,18 @@
 <template>
-  <div class="noticebar-demo">
-    <!-- 不带静态图标 -->
-    <t-notice-bar :visible="visible" :prefix-icon="false" marquee :content="content" />
-    <!-- 默认带静态图标 -->
-    <t-notice-bar :visible="visible" marquee :content="content" />
-  </div>
+  <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">
+    <template #prefixIcon>
+      <SoundIcon />
+    </template>
+  </t-notice-bar>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { SoundIcon } from 'tdesign-icons-vue-next';
 
-const content = ref<string>('提示文字描述提示文字描述提示文字描述');
+const content = ref<string>('提示文字描述提示文字描述提示文字描述提示文字描述文');
+const content1 = ref(['君不见', '高堂明镜悲白发', '朝如青丝暮成雪', '人生得意须尽欢', '莫使金樽空对月']);
 const visible = ref<boolean>(true);
 </script>
diff --git a/src/notice-bar/demos/suffixIcon.vue b/src/notice-bar/demos/suffixIcon.vue
@@ -0,0 +1,11 @@
+<template>
+  <t-notice-bar visible content="这是一条普通的通知信息">
+    <template #suffixIcon>
+      <CloseIcon />
+    </template>
+  </t-notice-bar>
+</template>
+
+<script lang="ts" setup>
+import { CloseIcon } from 'tdesign-icons-vue-next';
+</script>
diff --git a/src/notice-bar/demos/theme.vue b/src/notice-bar/demos/theme.vue
@@ -1,10 +1,16 @@
 <template>
-  <div class="noticebar-demo">
-    <t-notice-bar visible content="默认状态公告栏默认状态公告栏"></t-notice-bar>
-    <t-notice-bar visible theme="success" content="成功状态公告栏成功状态公告栏"></t-notice-bar>
-    <t-notice-bar visible theme="warning" content="警示状态公告栏警示状态公告栏"></t-notice-bar>
-    <t-notice-bar visible theme="error" content="错误状态公告栏错误状态公告栏"></t-notice-bar>
-  </div>
+  <t-notice-bar class="notice-bar-demo-block" visible content="默认状态公告栏默认状态公告栏"></t-notice-bar>
+  <t-notice-bar
+    class="notice-bar-demo-block"
+    visible
+    theme="success"
+    content="成功状态公告栏成功状态公告栏"
+  ></t-notice-bar>
+  <t-notice-bar
+    class="notice-bar-demo-block"
+    visible
+    theme="warning"
+    content="警示状态公告栏警示状态公告栏"
+  ></t-notice-bar>
+  <t-notice-bar visible theme="error" content="错误状态公告栏错误状态公告栏"></t-notice-bar>
 </template>
-
-<script lang="ts" setup></script>
diff --git a/src/notice-bar/notice-bar.en-US.md 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`<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
+-- | -- | --
+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/>
diff --git 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`<br/>展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏 | 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' | 'extra' | 'suffix-icon';`<br/> | 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 | `(value: boolean)` | 展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏
-click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' | 'content' | 'extra' | 'suffix-icon';`<br/>
+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/>