Skip to main content

实用函数

¥Utility Functions

Ionic Vue 附带了多个实用功能，你可以在应用中使用这些实用功能来简化某些任务，例如管理屏幕键盘和硬件后退按钮。

¥Ionic Vue ships with several utility functions that you can use in your application to make certain tasks easier such as managing the on-screen keyboard and the hardware back button.

路由​

¥Router

函数​

¥Functions

useIonRouter​

▸ 使用 IonRouter()：UseIonRouterResult

¥▸ useIonRouter(): UseIonRouterResult

返回 Ionic 路由实例，包含用于导航、自定义页面转换和原生功能的路由上下文的 API 方法。该函数可以与 Vue 中的 useRouter 结合使用。

¥Returns the Ionic router instance, containing API methods for navigating, customizing page transitions and routing context for native features. This function can be used in combination with the useRouter from Vue.

自定义页面转换

¥Customizing Page Transitions



import { IonPage, useIonRouter } from '@ionic/vue';


import { defineComponent } from 'vue';


import { customAnimation } from '@/animations/customAnimation';



export default defineComponent({
  components: { IonPage },
  setup() {
    const router = useIonRouter();
    const push = () => {
      router.push('/page2', customAnimation);
    };
    const back = () => {
      router.back(customAnimation);
    };

    return { push, back };
  },
});

Android 上的硬件后退按钮

¥Hardware back button on Android

你可能想知道当用户按下 Android 上的硬件后退按钮时你是否位于应用的根页面。

¥You may want to know if you are at the root page of the application when a user presses the hardware back button on Android.



import { useIonRouter } from '@ionic/vue';



...

export default {
  setup() {
    const ionRouter = useIonRouter();
    if (ionRouter.canGoBack()) {
      // Perform some action here
    }
  }
}

有关 Vue 路由的其他 API，请参阅 Vue 路由文档。

¥For additional APIs with Vue routing, please refer to the Vue Router documentation.

接口​

¥Interfaces

UseIonRouterResult​



import { AnimationBuilder } from '@ionic/vue';


import { RouteLocationRaw } from 'vue-router';

interface UseIonRouterResult {
  canGoBack: (deep?: number) => boolean;
  push: (location: RouteLocationRaw, routerAnimation?: AnimationBuilder) => void;
  replace: (location: RouteLocationRaw, routerAnimation?: AnimationBuilder) => void;
  back: (routerAnimation?: AnimationBuilder) => void;
  forward: (routerAnimation?: AnimationBuilder) => void;
  navigate: (
    location: string | Location,
    routerDirection?: 'forward' | 'back' | 'root' | 'none',
    routerAction?: 'push' | 'pop' | 'replace',
    routerAnimation?: AnimationBuilder
  ) => void;
}

useIonRouter(): UseIonRouterResult;

  • push 方法相当于调用 ionRouter.navigate(location, 'forward', 'push', animation)。

    ¥The push method is the equivalent of calling ionRouter.navigate(location, 'forward', 'push', animation).

  • replace 方法相当于调用 ionRouter.navigate(location, 'root', 'replace', animation)。

    ¥The replace method is the equivalent of calling ionRouter.navigate(location, 'root', 'replace', animation).

有关更多使用示例，请参阅 Vue 导航文档。

¥See the Vue Navigation Documentation for more usage examples.

硬件后退按钮​

¥Hardware Back Button

useBackButton 函数可用于注册回调函数，以便在按下 Android 上的硬件后退按钮时触发。此外，它还接受优先级参数，允许开发者自定义在注册多个处理程序时首先触发哪个处理程序。

¥The useBackButton function can be used to register a callback function to fire whenever the hardware back button on Android is pressed. Additionally it accepts a priority parameter, allowing developers to customize which handler fires first if multiple handlers are registered.



import { useBackButton } from '@ionic/vue';



...

useBackButton(10, () => {
  console.log('Hardware Back Button was called!');
});

接口​

¥Interfaces

type Handler = (processNextHandler: () => void) => Promise<any> | void | null;
interface UseBackButtonResult {
  unregister: () => void;
}

useBackButton(priority: number, handler: Handler): UseBackButtonResult;

请参阅 硬件后退按钮文档 了解更多信息和使用示例。

¥See the Hardware Back Button Documentation for more information and usage examples.

注意

仅当你的应用在 Capacitor 或 Cordova 中运行时，才会触发 useBackButton 回调。请参阅 Capacitor 和 Cordova 中的硬件后退按钮 了解更多信息。

¥The useBackButton callback will only fire when your app is running in Capacitor or Cordova. See Hardware Back Button in Capacitor and Cordova for more information.

键盘​

¥Keyboard

useKeyboard 函数返回一个包含屏幕键盘状态的对象。该对象提供诸如是否显示屏幕键盘以及键盘高度（以像素为单位）等信息。此信息在 Vue ref 中提供，因此它将在你的应用中做出反应。

¥The useKeyboard function returns an object that contains the state of the on-screen keyboard. This object provides information such as whether or not the on-screen keyboard is presented and what the height of the keyboard is in pixels. This information is provided in a Vue ref so it will be reactive in your application.

import { watch } from 'vue';


import { useKeyboard } from '@ionic/vue';



const { isOpen, keyboardHeight } = useKeyboard();

watch(keyboardHeight, () => {
  console.log(`Keyboard height is ${keyboardHeight.value}px`);
});

接口​

¥Interfaces

interface UseKeyboardResult {
  isOpen: Ref<boolean>;
  keyboardHeight: Ref<number>;
  unregister: () => void
}

useKeyboard(): UseKeyboardResult;

请参阅 键盘文档 了解更多信息和使用示例。

¥See the Keyboard Documentation for more information and usage examples.

Ionic 生命周期​

¥Ionic Lifecycles

Ionic Vue 为 setup() 函数提供了多个生命周期钩子，以利用 Ionic Framework 页面生命周期。

¥Ionic Vue provides several lifecycle hooks for the setup() function to tap into the Ionic Framework page lifecycle.



import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';


import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonPage },
  setup() {
    onIonViewDidEnter(() => {
      console.log('Page did enter');
    });

    onIonViewDidLeave(() => {
      console.log('Page did leave');
    });

    onIonViewWillEnter(() => {
      console.log('Page will enter');
    });

    onIonViewWillLeave(() => {
      console.log('Page will leave');
    });
  },
});
注意

应用中的页面需要使用 IonPage 组件才能正确触发生命周期方法和钩子。

¥Pages in your app need to be using the IonPage component in order for lifecycle methods and hooks to fire properly.

请参阅 Vue 生命周期文档 了解更多信息和使用示例。

¥See the Vue Lifecycle Documentation for more information and usage examples.

目录