feat(NoticeBar): add reset method (#8917)

src/form/README.md

@@ -514,11 +514,11 @@ export default {
 
 ### validate-trigger
 
-| Value    | Description                                                     |
+| Value    | Description                                                      |
-| -------- | --------------------------------------------------------------- |
+| -------- | ---------------------------------------------------------------- |
-| onSubmit | Trigger validation after submiting form                         |
+| onSubmit | Trigger validation after submitting form                         |
-| onBlur   | Trigger validation after submiting form or bluring input        |
+| onBlur   | Trigger validation after submitting form or blurring input       |
-| onChange | Trigger validation after submiting form or changing input value |
+| onChange | Trigger validation after submitting form or changing input value |
 
 ### Events
 

src/notice-bar/NoticeBar.tsx

@@ -11,6 +11,7 @@ import {
   useEventListener,
   onMountedOrActivated,
 } from '@vant/use';
+import { useExpose } from '../composables/use-expose';
 import { onPopupReopen } from '../composables/on-popup-reopen';
 
 // Components
@@ -140,17 +141,13 @@ export default defineComponent({
     };
 
     const reset = () => {
+      const { delay, speed, scrollable } = props;
+      const ms = isDef(delay) ? +delay * 1000 : 0;
+
       wrapWidth = 0;
       contentWidth = 0;
       state.offset = 0;
       state.duration = 0;
-    };
-
-    const start = () => {
-      const { delay, speed, scrollable } = props;
-      const ms = isDef(delay) ? +delay * 1000 : 0;
-
-      reset();
 
       clearTimeout(startTimer);
       startTimer = setTimeout(() => {
@@ -172,14 +169,15 @@ export default defineComponent({
       }, ms);
     };
 
-    onPopupReopen(start);
+    onPopupReopen(reset);
-    onMountedOrActivated(start);
+    onMountedOrActivated(reset);
 
     // fix cache issues with forwards and back history in safari
     // see: https://guwii.com/cache-issues-with-forwards-and-back-history-in-safari/
-    useEventListener('pageshow', start);
+    useEventListener('pageshow', reset);
+    useExpose({ reset });
 
-    watch(() => [props.text, props.scrollable], start);
+    watch(() => [props.text, props.scrollable], reset);
 
     return () => {
       const { color, wrapable, background } = props;

src/notice-bar/README.md

@@ -107,6 +107,14 @@ app.use(NoticeBar);
 | close  | Emitted when NoticeBar is closed   | _event: MouseEvent_ |
 | replay | Emitted when NoticeBar is replayed | -                   |
 
+### Methods
+
+Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get NoticeBar instance and call instance methods.
+
+| Name           | Description     | Attribute | Return value |
+| -------------- | --------------- | --------- | ------------ |
+| reset `v3.1.1` | Reset NoticeBar | -         | -            |
+
 ### Slots
 
 | Name       | Description         |

src/notice-bar/README.zh-CN.md

@@ -128,6 +128,14 @@ app.use(NoticeBar);
 | close  | 关闭通知栏时触发             | _event: MouseEvent_ |
 | replay | 每当滚动栏重新开始滚动时触发 | -                   |
 
+### 方法
+
+通过 ref 可以获取到 NoticeBar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名         | 说明                 | 参数 | 返回值 |
+| -------------- | -------------------- | ---- | ------ |
+| reset `v3.1.1` | 重置通知栏到初始状态 | -    | -      |
+
 ### Slots
 
 | 名称       | 内容           |

src/notice-bar/test/index.spec.tsx

@@ -1,5 +1,6 @@
 import { NoticeBar } from '..';
 import { mount, later } from '../../../test';
+import type { ComponentInstance } from '../../utils';
 
 test('should emit close event when close icon is clicked', () => {
   const wrapper = mount(NoticeBar, {
@@ -91,3 +92,13 @@ test('should not start scrolling when content width > wrap width ', async () =>
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should expose reset methods', async () => {
+  const wrapper = mount(NoticeBar, {
+    props: {
+      text: 'foo',
+    },
+  });
+
+  expect((wrapper.vm as ComponentInstance).reset).toBeTruthy();
+});