diff --git a/src/form/README.md b/src/form/README.md index 8f3c21fde..c76fd8c93 100644 --- a/src/form/README.md +++ b/src/form/README.md @@ -514,11 +514,11 @@ export default { ### validate-trigger -| Value | Description | -| -------- | --------------------------------------------------------------- | -| onSubmit | Trigger validation after submiting form | -| onBlur | Trigger validation after submiting form or bluring input | -| onChange | Trigger validation after submiting form or changing input value | +| Value | Description | +| -------- | ---------------------------------------------------------------- | +| onSubmit | Trigger validation after submitting form | +| onBlur | Trigger validation after submitting form or blurring input | +| onChange | Trigger validation after submitting form or changing input value | ### Events diff --git a/src/notice-bar/NoticeBar.tsx b/src/notice-bar/NoticeBar.tsx index 5ae40f141..f12865312 100644 --- a/src/notice-bar/NoticeBar.tsx +++ b/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); - onMountedOrActivated(start); + onPopupReopen(reset); + 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; diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md index 74c453b60..f5d94118c 100644 --- a/src/notice-bar/README.md +++ b/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 | diff --git a/src/notice-bar/README.zh-CN.md b/src/notice-bar/README.zh-CN.md index 8ecaa7256..ee416bfa9 100644 --- a/src/notice-bar/README.zh-CN.md +++ b/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 | 名称 | 内容 | diff --git a/src/notice-bar/test/index.spec.tsx b/src/notice-bar/test/index.spec.tsx index b9859a295..735269518 100644 --- a/src/notice-bar/test/index.spec.tsx +++ b/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(); +});