feat(PullRefresh): add change event (#10702)

packages/vant/src/pull-refresh/PullRefresh.tsx

@@ -55,7 +55,7 @@ export default defineComponent({
 
   props: pullRefreshProps,
 
-  emits: ['refresh', 'update:modelValue'],
+  emits: ['change', 'refresh', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
     let reachTop: boolean;
@@ -111,6 +111,11 @@ export default defineComponent({
       } else {
         state.status = 'loosing';
       }
+
+      emit('change', {
+        status: state.status,
+        distance,
+      });
     };
 
     const getStatusText = () => {

packages/vant/src/pull-refresh/README.md

@@ -126,9 +126,10 @@ Use slots to custom tips.
 
 ### Events
 
-| Event   | Description                   | Parameters |
-| ------- | ----------------------------- | ---------- |
-| refresh | Emitted after pulling refresh | -          |
+| Event | Description | Parameters |
+| --- | --- | --- |
+| refresh | Emitted after pulling refresh | - |
+| change `v3.5.1` | Emitted when draging or status changed | _{ status: string, distance: number }_ |
 
 ### Slots
 

packages/vant/src/pull-refresh/README.zh-CN.md

@@ -129,9 +129,10 @@ export default {
 
 ### Events
 
-| 事件名  | 说明           | 回调参数 |
-| ------- | -------------- | -------- |
-| refresh | 下拉刷新时触发 | -        |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| refresh | 下拉刷新时触发 | - |
+| change `v3.5.1` | 拖动时或状态改变时触发 | _{ status: string, distance: number }_ |
 
 ### Slots
 

packages/vant/src/pull-refresh/test/index.spec.ts

@@ -164,3 +164,14 @@ test('should allow to custom pull distance', async () => {
   await later();
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should emit change event when status changed', async () => {
+  const wrapper = mount(PullRefresh);
+  const track = wrapper.find('.van-pull-refresh__track');
+  trigger(track, 'touchstart', 0, 0);
+  trigger(track, 'touchmove', 0, 20);
+  await later();
+  expect(wrapper.emitted('change')).toEqual([
+    [{ distance: 20, status: 'pulling' }],
+  ]);
+});

packages/vant/src/toast/function-call.tsx

@@ -1,14 +1,8 @@
 import { ref, watch, getCurrentInstance, type App } from 'vue';
-import {
-  extend,
-  isObject,
-  inBrowser,
-  withInstall,
-  type ComponentInstance,
-} from '../utils';
+import { extend, isObject, inBrowser, withInstall } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanToast from './Toast';
-import type { ToastType, ToastOptions } from './types';
+import type { ToastType, ToastOptions, ToastWrapperInstance } from './types';
 
 const defaultOptions: ToastOptions = {
   icon: '',
@@ -32,7 +26,7 @@ const defaultOptions: ToastOptions = {
   closeOnClickOverlay: false,
 };
 
-let queue: ComponentInstance[] = [];
+let queue: ToastWrapperInstance[] = [];
 let allowMultiple = false;
 let currentOptions = extend({}, defaultOptions);
 
@@ -83,7 +77,7 @@ function createInstance() {
     },
   });
 
-  return instance;
+  return instance as ToastWrapperInstance;
 }
 
 function getInstance() {
@@ -97,7 +91,7 @@ function getInstance() {
 
 function Toast(options: string | ToastOptions = {}) {
   if (!inBrowser) {
-    return {} as ComponentInstance;
+    return {} as ToastWrapperInstance;
   }
 
   const toast = getInstance();

packages/vant/src/toast/types.ts

@@ -1,5 +1,5 @@
 import { Toast } from './function-call';
-import type { TeleportProps } from 'vue';
+import type { ComponentPublicInstance, TeleportProps } from 'vue';
 import type { LoadingType } from '../loading';
 import type { Numeric } from '../utils';
 
@@ -34,3 +34,14 @@ declare module '@vue/runtime-core' {
     $toast: typeof Toast;
   }
 }
+
+export type ToastWrapperInstance = ComponentPublicInstance<
+  { message: Numeric },
+  {
+    clear: () => void;
+    /**
+     * @private
+     */
+    open: (props: Record<string, any>) => void;
+  }
+>;

packages/vant/src/uploader/Uploader.tsx

@@ -74,7 +74,7 @@ const uploaderProps = {
     Numeric | [Numeric, Numeric]
   >,
   previewImage: truthProp,
-  previewOptions: Object as PropType<ImagePreviewOptions>,
+  previewOptions: Object as PropType<Partial<ImagePreviewOptions>>,
   previewFullImage: truthProp,
   maxSize: {
     type: [Number, String, Function] as PropType<UploaderMaxSize>,