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

* feat(NoticeBar): add reset method

* chore: update

* chore: add comment

src/field/README.md

@@ -247,7 +247,7 @@ Use `input-align` prop to align the input value.
 | label-align | Label align, can be set to `center` `right` | _string_ | `left` |
 | input-align | Input align, can be set to `center` `right` | _string_ | `left` |
 | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
-| autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` |
+| autosize | Textarea auto resize，can accept an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` |
 | left-icon | Left side icon name | _string_ | - |
 | right-icon | Right side icon name | _string_ | - |
 | icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
@@ -262,7 +262,7 @@ Field support all native events of input tag
 | --- | --- | --- |
 | input | Emitted when input value changed | _value: string_ |
 | focus | Emitted when input is focused | _event: Event_ |
-| blur | Emitted when input is blured | _event: Event_ |
+| blur | Emitted when input is blurred | _event: Event_ |
 | clear | Emitted when the clear icon is clicked | _event: Event_ |
 | click | Emitted when component is clicked | _event: Event_ |
 | click-input `v2.8.1` | Emitted when the input is clicked | _event: Event_ |

src/notice-bar/README.md

@@ -108,6 +108,14 @@ Vue.use(NoticeBar);
 | left-icon  | Custom left icon    |
 | right-icon | Custom right icon   |
 
+### Methods
+
+Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods.
+
+| Name             | Description     | Attribute | Return value |
+| ---------------- | --------------- | --------- | ------------ |
+| reset `v2.12.32` | Reset NoticeBar | -         | -            |
+
 ### Less Variables
 
 How to use: [Custom Theme](#/en-US/theme).

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

@@ -133,6 +133,14 @@ Vue.use(NoticeBar);
 | left-icon  | 自定义左侧图标 |
 | right-icon | 自定义右侧图标 |
 
+### 方法
+
+通过 ref 可以获取到 NoticeBar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名           | 说明                 | 参数 | 返回值 |
+| ---------------- | -------------------- | ---- | ------ |
+| reset `v2.12.32` | 重置通知栏到初始状态 | -    | -      |
+
 ### 样式变量
 
 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。

src/notice-bar/index.js

@@ -10,7 +10,7 @@ export default createComponent({
     BindEventMixin(function (bind) {
       // fix cache issues with forwards and back history in safari
       // see: https://guwii.com/cache-issues-with-forwards-and-back-history-in-safari/
-      bind(window, 'pageshow', this.start);
+      bind(window, 'pageshow', this.reset);
     }),
   ],
 
@@ -52,9 +52,9 @@ export default createComponent({
   },
 
   watch: {
-    scrollable: 'start',
+    scrollable: 'reset',
     text: {
-      handler: 'start',
+      handler: 'reset',
       immediate: true,
     },
   },
@@ -62,14 +62,12 @@ export default createComponent({
   created() {
     // https://github.com/youzan/vant/issues/8634
     if (this.vanPopup) {
-      this.vanPopup.onReopen(() => {
-        this.start();
-      });
+      this.vanPopup.onReopen(this.reset);
     }
   },
 
   activated() {
-    this.start();
+    this.reset();
   },
 
   methods: {
@@ -96,17 +94,19 @@ export default createComponent({
       });
     },
 
+    // not an exposed-api, but may used by some users
+    start() {
+      this.reset();
+    },
+
+    // @exposed-api
     reset() {
+      const delay = isDef(this.delay) ? this.delay * 1000 : 0;
+
       this.offset = 0;
       this.duration = 0;
       this.wrapWidth = 0;
       this.contentWidth = 0;
-    },
-
-    start() {
-      const delay = isDef(this.delay) ? this.delay * 1000 : 0;
-
-      this.reset();
 
       clearTimeout(this.startTimer);
       this.startTimer = setTimeout(() => {