@0x30/vue-navigation
Version:
255 lines (216 loc) • 7.83 kB
TypeScript
import { App } from 'vue';
import { Component } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { Plugin as Plugin_2 } from 'vue';
import { PublicProps } from 'vue';
import { RendererElement } from 'vue';
import { RendererNode } from 'vue';
import { VNode } from 'vue';
export declare const back: () => Promise<void>;
/**
* 返回到 最首页
*/
export declare const backToHome: () => Promise<void>;
/**
* 黑箱返回
*
* 场景如下:
* 比如 当前的页面堆栈为: `a -> b -> c -> d`
* ```js
* /// 此时调用该方法
* blackBoxBack(2)
* ```
* 那么 页面 堆栈 会修改为 a -> d
*/
export declare const blackBoxBack: (delta: number) => Promise<void>;
export declare const disableBodyPointerEvents: () => void;
export declare const enableBodyPointerEvents: () => void;
/**
* 获取当前所在的页面的 mate 信息
* @returns PageMate 信息
*/
export declare const getCurrentPageMate: () => PageMate | undefined;
/**
* 返回当前最顶部页面方法
*
* 方法返回 `Promise<void>`, 在页面完成跳转后 `promise.reslove`
*
* 组件可以通过设置 `useTransitionLeave` 设置页面离开动画,如果设置动画则会在动画执行完成后, `promise.reslove`
*
* @param delta 返回次数 uint
*/
export declare const goBack: (delta?: number) => Promise<void>;
declare type LifeCycleHooks = {
onBeforeEnter?: (el: RendererElement) => void;
onAfterEnter?: (el: RendererElement) => void;
onEnterCancelled?: (el: RendererElement) => void;
onBeforeLeave?: (el: RendererElement) => void;
onAfterLeave?: (el: RendererElement) => void;
onLeaveCancelled?: (el: RendererElement) => void;
onBeforeAppear?: (el: RendererElement) => void;
onAfterAppear?: (el: RendererElement) => void;
onAppearCancelled?: (el: RendererElement) => void;
};
/**
* 示例
````ts
import { createApp } from 'vue'
const app = createApp({
// ...
})
app.use(navigation)
````
在 app,创建后 use 开始启用 该插件
*/
export declare const navigation: Plugin_2;
declare const Navigator_2: DefineComponent< {}, () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[] | undefined, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
export { Navigator_2 as Navigator }
/**
* 页面即将展示hook
* 执行动画后
*/
export declare const onDidAppear: (hook: (isFirst: boolean) => void) => void;
/**
* 页面即将消失hook
* 执行动画后
*/
export declare const onDidDisappear: (hook: () => void) => void;
export declare const onPageAfterEnter: (hook: () => void) => void;
export declare const onPageAfterLeave: (hook: () => void) => void;
export declare const onPageBeforeEnter: (hook: () => void) => void;
export declare const onPageBeforeLeave: (hook: () => void) => void;
export declare const onPageChange: (func: PageChangeHook, config?: Partial<PageChangeConfig>) => () => boolean;
/**
* 页面即将展示hook
* 执行动画前
* @param hook
*/
export declare const onWillAppear: (hook: (isFirst: boolean) => void) => void;
/**
* 页面即将消失hook
* 执行动画前
* @param hook
*/
export declare const onWillDisappear: (hook: () => void) => void;
declare type PageChangeConfig = {
/**
* 是不是每一个 页面切换都监听到
* 默认为 false:
* * true: 每一次页面变动的时候 都会触发
* * false: 只有存在 mateInfo 并且 没有设置为 useQuietPage 的页面 会触发
*/
isEvery: boolean;
};
declare type PageChangeHook = (from?: PageMate, to?: PageMate) => void;
declare interface PageMate {
id?: string;
name?: string;
[key: string]: any;
}
declare type ProgressExitAnimatedHandle = (elements: {
from?: Element;
to?: Element;
}, progress: number, isFinish?: boolean) => void;
/**
* 前进方法
*
* ```tsx
* import Component from "./component"
*
* push(<Component prop1={1} />)
* ```
*
* 异步加载组件使用 vue 自带的 `defineAsyncComponent`
*
* ```tsx
* const Component = defineAsyncComponent(() => import("./component"));
* push(<Component prop1={1} />);
* ```
*
* 方法返回 `Promise<void>`, 在页面完成跳转后 `promise.reslove`
*
* 组件可以通过设置 `useTransitionEnter` 设置页面动画,如果设置动画则会在动画执行完成后, `promise.reslove`
*
* @param component 组件
* @param params 页面的参数, 在页面发上变化的时候 这些参数会被携带
*/
export declare const push: (component: Component | VNode, hooks?: LifeCycleHooks) => Promise<App<Element>>;
/**
* 替换方法
*
* ```tsx
* import Component from "./component"
*
* replace(<Component prop1={1} />)
* ```
*
* 异步加载组件使用 vue 自带的 `defineAsyncComponent`
*
* ```tsx
* const Component = defineAsyncComponent(() => import("./component"));
* replace(<Component prop1={1} />);
* ```
*
* 方法返回 `Promise<void>`, 在页面完成跳转后 `promise.reslove`
*
* 组件可以通过设置 `useTransitionEnter` 设置页面动画,如果设置动画则会在动画执行完成后, `promise.reslove`
*
* @param component 组件
*/
export declare const replace: (component: Component | VNode, hooks?: LifeCycleHooks) => Promise<App<Element>>;
/**
* 前往页面
* @param isReplace 是否以替换的方式前往
*/
export declare const to: (isReplace: boolean) => (component: Component | VNode, hooks?: LifeCycleHooks) => Promise<App<Element>>;
declare type TransitionAmimatorHook = (elements: {
from?: Element;
to?: Element;
}, done: () => void) => void;
/**
* useAppBeforeMount() 用于在 app 挂载之前执行一些操作
* example:
* ```tsx
* import { useAppBeforeMount } from '@0x30/vue-navigation'
*
* useAppBeforeMount((app) => {
* app.use(store)
* app.use(router)
* })
* @param config app 挂载之前执行的操作
*/
export declare const useAppBeforeMount: (config: (app: App) => void) => void;
/**
* 在页面即将返回的时候，会调用hook方法，返回是否可以返回
* 该方法，如果在某个页面多次注册，会覆盖请注意
*/
export declare const useLeaveBefore: (hook: (() => boolean) | (() => Promise<boolean>)) => void;
export declare const usePageMate: (mate: PageMate) => void;
/**
* 当接收到 滑动手势渐进式返回 执行动画时
* @param hook 执行动画的错做
*/
export declare const useProgressExitAnimated: (hook: ProgressExitAnimatedHandle) => void;
/**
* 该项目在有新的页面
* 1. 进入的时候，触发上一个页面的 onDeactivate
* 2. 离开的时候，触发上一个页面的 onActivate 事件
* 当你写了一个 Loading 加载中组件，当作一个页面,那么 你可以将它设置为 安静的页面;
* 那么在他出现的时候，不会触发上一个页面的 deactived,在 Loading 页面消失之后， 也不会触发上一个页面的 actived 页面
*/
export declare const useQuietPage: () => void;
/**
* 在页面进入时设置 动画执行方法
* 请保证该方法只被注册一次,多次注册将覆盖
*/
export declare const useTransitionEnter: (hook: TransitionAmimatorHook) => void;
/**
* 在页面离开时设置 动画执行方法
* 请保证该方法只被注册一次,多次注册将覆盖
*/
export declare const useTransitionLeave: (hook: TransitionAmimatorHook) => void;
export { }