diff --git a/src/dialog/function-call.tsx b/src/dialog/function-call.tsx
new file mode 100644
index 000000000..55a2d46ed
--- /dev/null
+++ b/src/dialog/function-call.tsx
@@ -0,0 +1,130 @@
+import { App, CSSProperties, TeleportProps } from 'vue';
+import { inBrowser, ComponentInstance, withInstall } from '../utils';
+import { Interceptor } from '../utils/interceptor';
+import { mountComponent, usePopupState } from '../utils/mount-component';
+import VanDialog, {
+  DialogTheme,
+  DialogAction,
+  DialogMessage,
+  DialogMessageAlign,
+} from './Dialog';
+
+export type DialogOptions = {
+  title?: string;
+  width?: string | number;
+  theme?: DialogTheme;
+  message?: DialogMessage;
+  overlay?: boolean;
+  teleport?: TeleportProps['to'];
+  className?: unknown;
+  allowHtml?: boolean;
+  lockScroll?: boolean;
+  transition?: string;
+  beforeClose?: Interceptor;
+  messageAlign?: DialogMessageAlign;
+  overlayClass?: string;
+  overlayStyle?: CSSProperties;
+  closeOnPopstate?: boolean;
+  cancelButtonText?: string;
+  showCancelButton?: boolean;
+  showConfirmButton?: boolean;
+  cancelButtonColor?: string;
+  confirmButtonText?: string;
+  confirmButtonColor?: string;
+  closeOnClickOverlay?: boolean;
+};
+
+let instance: ComponentInstance;
+
+function initInstance() {
+  const Wrapper = {
+    setup() {
+      const { state, toggle } = usePopupState();
+      return () => <VanDialog {...{ ...state, 'onUpdate:show': toggle }} />;
+    },
+  };
+
+  ({ instance } = mountComponent(Wrapper));
+}
+
+function Dialog(options: DialogOptions) {
+  /* istanbul ignore if */
+  if (!inBrowser) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    if (!instance) {
+      initInstance();
+    }
+
+    instance.open({
+      ...Dialog.currentOptions,
+      ...options,
+      callback: (action: DialogAction) => {
+        (action === 'confirm' ? resolve : reject)(action);
+      },
+    });
+  });
+}
+
+Dialog.defaultOptions = {
+  title: '',
+  width: '',
+  theme: null,
+  message: '',
+  overlay: true,
+  callback: null,
+  teleport: 'body',
+  className: '',
+  allowHtml: false,
+  lockScroll: true,
+  transition: 'van-dialog-bounce',
+  beforeClose: null,
+  overlayClass: '',
+  overlayStyle: undefined,
+  messageAlign: '',
+  cancelButtonText: '',
+  cancelButtonColor: null,
+  confirmButtonText: '',
+  confirmButtonColor: null,
+  showConfirmButton: true,
+  showCancelButton: false,
+  closeOnPopstate: true,
+  closeOnClickOverlay: false,
+};
+
+Dialog.currentOptions = {
+  ...Dialog.defaultOptions,
+};
+
+Dialog.alert = Dialog;
+
+Dialog.confirm = (options: DialogOptions) =>
+  Dialog({
+    showCancelButton: true,
+    ...options,
+  });
+
+Dialog.close = () => {
+  if (instance) {
+    instance.toggle(false);
+  }
+};
+
+Dialog.setDefaultOptions = (options: DialogOptions) => {
+  Object.assign(Dialog.currentOptions, options);
+};
+
+Dialog.resetDefaultOptions = () => {
+  Dialog.currentOptions = { ...Dialog.defaultOptions };
+};
+
+Dialog.install = (app: App) => {
+  app.use(withInstall<typeof VanDialog>(VanDialog));
+  app.config.globalProperties.$dialog = Dialog;
+};
+
+Dialog.Component = withInstall<typeof VanDialog>(VanDialog);
+
+export { Dialog };
diff --git a/src/dialog/index.tsx b/src/dialog/index.tsx
index 87a561ab9..cc6ad11d5 100644
--- a/src/dialog/index.tsx
+++ b/src/dialog/index.tsx
@@ -1,132 +1,6 @@
-import { App, CSSProperties, TeleportProps } from 'vue';
-import { inBrowser, ComponentInstance, withInstall } from '../utils';
-import { Interceptor } from '../utils/interceptor';
-import { mountComponent, usePopupState } from '../utils/mount-component';
-import VanDialog, {
-  DialogTheme,
-  DialogAction,
-  DialogMessage,
-  DialogMessageAlign,
-} from './Dialog';
-
-export type DialogOptions = {
-  title?: string;
-  width?: string | number;
-  theme?: DialogTheme;
-  message?: DialogMessage;
-  overlay?: boolean;
-  teleport?: TeleportProps['to'];
-  className?: unknown;
-  allowHtml?: boolean;
-  lockScroll?: boolean;
-  transition?: string;
-  beforeClose?: Interceptor;
-  messageAlign?: DialogMessageAlign;
-  overlayClass?: string;
-  overlayStyle?: CSSProperties;
-  closeOnPopstate?: boolean;
-  cancelButtonText?: string;
-  showCancelButton?: boolean;
-  showConfirmButton?: boolean;
-  cancelButtonColor?: string;
-  confirmButtonText?: string;
-  confirmButtonColor?: string;
-  closeOnClickOverlay?: boolean;
-};
-
-let instance: ComponentInstance;
-
-function initInstance() {
-  const Wrapper = {
-    setup() {
-      const { state, toggle } = usePopupState();
-      return () => <VanDialog {...{ ...state, 'onUpdate:show': toggle }} />;
-    },
-  };
-
-  ({ instance } = mountComponent(Wrapper));
-}
-
-function Dialog(options: DialogOptions) {
-  /* istanbul ignore if */
-  if (!inBrowser) {
-    return Promise.resolve();
-  }
-
-  return new Promise((resolve, reject) => {
-    if (!instance) {
-      initInstance();
-    }
-
-    instance.open({
-      ...Dialog.currentOptions,
-      ...options,
-      callback: (action: DialogAction) => {
-        (action === 'confirm' ? resolve : reject)(action);
-      },
-    });
-  });
-}
-
-Dialog.defaultOptions = {
-  title: '',
-  width: '',
-  theme: null,
-  message: '',
-  overlay: true,
-  callback: null,
-  teleport: 'body',
-  className: '',
-  allowHtml: false,
-  lockScroll: true,
-  transition: 'van-dialog-bounce',
-  beforeClose: null,
-  overlayClass: '',
-  overlayStyle: undefined,
-  messageAlign: '',
-  cancelButtonText: '',
-  cancelButtonColor: null,
-  confirmButtonText: '',
-  confirmButtonColor: null,
-  showConfirmButton: true,
-  showCancelButton: false,
-  closeOnPopstate: true,
-  closeOnClickOverlay: false,
-};
-
-Dialog.currentOptions = {
-  ...Dialog.defaultOptions,
-};
-
-Dialog.alert = Dialog;
-
-Dialog.confirm = (options: DialogOptions) =>
-  Dialog({
-    showCancelButton: true,
-    ...options,
-  });
-
-Dialog.close = () => {
-  if (instance) {
-    instance.toggle(false);
-  }
-};
-
-Dialog.setDefaultOptions = (options: DialogOptions) => {
-  Object.assign(Dialog.currentOptions, options);
-};
-
-Dialog.resetDefaultOptions = () => {
-  Dialog.currentOptions = { ...Dialog.defaultOptions };
-};
-
-Dialog.install = (app: App) => {
-  app.use(withInstall<typeof VanDialog>(VanDialog));
-  app.config.globalProperties.$dialog = Dialog;
-};
-
-Dialog.Component = withInstall<typeof VanDialog>(VanDialog);
+import { Dialog, DialogOptions } from './function-call';
+import type { DialogTheme, DialogMessage, DialogMessageAlign } from './Dialog';
 
 export default Dialog;
 export { Dialog };
-export type { DialogTheme, DialogMessage, DialogMessageAlign };
+export type { DialogTheme, DialogMessage, DialogOptions, DialogMessageAlign };
diff --git a/src/dialog/test/funciton-call.spec.js b/src/dialog/test/funciton-call.spec.js
index 5c89ec29a..5cc351df7 100644
--- a/src/dialog/test/funciton-call.spec.js
+++ b/src/dialog/test/funciton-call.spec.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import { later } from '../../../test';
-import { Dialog } from '..';
+import { Dialog } from '../function-call';
 import DialogComponent from '../Dialog';
 
 test('should update default options when calling setDefaultOptions method', () => {
diff --git a/src/image-preview/index.tsx b/src/image-preview/function-call.tsx
similarity index 98%
rename from src/image-preview/index.tsx
rename to src/image-preview/function-call.tsx
index 8954dab12..9e06afc86 100644
--- a/src/image-preview/index.tsx
+++ b/src/image-preview/function-call.tsx
@@ -103,5 +103,4 @@ ImagePreview.install = (app: App) => {
   app.use(withInstall<typeof VanImagePreview>(VanImagePreview));
 };
 
-export default ImagePreview;
 export { ImagePreview };
diff --git a/src/image-preview/index.ts b/src/image-preview/index.ts
new file mode 100644
index 000000000..60e98c6ed
--- /dev/null
+++ b/src/image-preview/index.ts
@@ -0,0 +1,5 @@
+import { ImagePreview, ImagePreviewOptions } from './function-call';
+
+export default ImagePreview;
+export { ImagePreview };
+export type { ImagePreviewOptions };
diff --git a/src/image-preview/test/function.spec.ts b/src/image-preview/test/function-call.spec.ts
similarity index 89%
rename from src/image-preview/test/function.spec.ts
rename to src/image-preview/test/function-call.spec.ts
index d2412a710..3eb380cf8 100644
--- a/src/image-preview/test/function.spec.ts
+++ b/src/image-preview/test/function-call.spec.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import { ImagePreview } from '..';
+import { ImagePreview } from '../function-call';
 import ImagePreviewComponent from '../ImagePreview';
 
 test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
diff --git a/src/image-preview/test/index.spec.ts b/src/image-preview/test/index.spec.ts
index b58ee2663..561fad635 100644
--- a/src/image-preview/test/index.spec.ts
+++ b/src/image-preview/test/index.spec.ts
@@ -7,7 +7,7 @@ import {
   triggerDrag,
   mockGetBoundingClientRect,
 } from '../../../test';
-import { ImagePreview } from '..';
+import { ImagePreview } from '../function-call';
 import ImagePreviewComponent from '../ImagePreview';
 
 const images = [
diff --git a/src/notify/index.tsx b/src/notify/function-call.tsx
similarity index 98%
rename from src/notify/index.tsx
rename to src/notify/function-call.tsx
index 6fb0a6173..e01fef390 100644
--- a/src/notify/index.tsx
+++ b/src/notify/function-call.tsx
@@ -103,5 +103,4 @@ Notify.install = (app: App) => {
 
 Notify.Component = withInstall<typeof VanNotify>(VanNotify);
 
-export default Notify;
 export { Notify };
diff --git a/src/notify/index.ts b/src/notify/index.ts
new file mode 100644
index 000000000..8a6aa185c
--- /dev/null
+++ b/src/notify/index.ts
@@ -0,0 +1,6 @@
+import { Notify, NotifyOptions } from './function-call';
+import type { NotifyType } from './Notify';
+
+export default Notify;
+export { Notify };
+export type { NotifyType, NotifyOptions };
diff --git a/src/notify/test/index.spec.js b/src/notify/test/index.spec.js
index 777677e6a..a66520dac 100644
--- a/src/notify/test/index.spec.js
+++ b/src/notify/test/index.spec.js
@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import { later } from '../../../test';
 import { trigger } from '../../utils';
-import { Notify } from '..';
+import { Notify } from '../function-call';
 import NotifyComponent from '../Notify';
 
 test('should not throw error if calling clear method before render notify', () => {
diff --git a/src/toast/index.tsx b/src/toast/function-call.tsx
similarity index 98%
rename from src/toast/index.tsx
rename to src/toast/function-call.tsx
index 0f2eccdcb..bacbc6664 100644
--- a/src/toast/index.tsx
+++ b/src/toast/function-call.tsx
@@ -185,6 +185,4 @@ Toast.install = (app: App) => {
   app.config.globalProperties.$toast = Toast;
 };
 
-export default Toast;
 export { Toast };
-export type { ToastType, ToastPosition };
diff --git a/src/toast/index.ts b/src/toast/index.ts
new file mode 100644
index 000000000..6e99616d4
--- /dev/null
+++ b/src/toast/index.ts
@@ -0,0 +1,6 @@
+import { Toast, ToastOptions } from './function-call';
+import type { ToastType, ToastPosition } from './Toast';
+
+export default Toast;
+export { Toast };
+export type { ToastType, ToastOptions, ToastPosition };
diff --git a/src/toast/test/function.spec.ts b/src/toast/test/function.spec.ts
index af9ecfae4..a0036c168 100644
--- a/src/toast/test/function.spec.ts
+++ b/src/toast/test/function.spec.ts
@@ -1,7 +1,7 @@
-import { later } from '../../../test';
-import Toast from '../index';
-import ToastComponent from '../Toast';
 import { createApp } from 'vue';
+import { later } from '../../../test';
+import { Toast } from '../function-call';
+import ToastComponent from '../Toast';
 
 test('toast disappeared after duration', async () => {
   const onClose = jest.fn();