feat: 更新例子

Author: jingwenzheng

src/App.tsx

@@ -1,9 +1,8 @@
 import { createApp } from 'vue'
-import './style.css'
 
 import Home from './views/home'
 
-import { Navigator, navigation, onPageChange } from '@0x30/vue-navigation'
+import { navigation, onPageChange } from '@0x30/vue-navigation'
 
 // or use this mode
 // createApp(
@@ -20,5 +19,5 @@ onPageChange(
   (from, to) => {
     console.log('页面变化', from, to)
   },
-  { isEvery: true }
+  { isEvery: true },
 )

src/main.tsx

@@ -0,0 +1,31 @@
+import {
+  onDidAppear,
+  onDidDisappear,
+  onWillAppear,
+  onWillDisappear,
+} from '@0x30/vue-navigation'
+
+const useHooks = (title: string) => {
+  onWillAppear(() => {
+    console.log(title, '即将展示')
+  })
+
+  onWillDisappear(() => {
+    console.log(title, '即将消失')
+  })
+
+  onDidAppear(() => {
+    console.log(title, '展示')
+  })
+
+  onDidDisappear(() => {
+    console.log(title, '消失')
+  })
+}
+
+const wait = (timeout: number = 1000) =>
+  new Promise<void>((res) => {
+    window.setTimeout(res, timeout)
+  })
+
+export { useHooks, wait }

src/routers.tsx

@@ -1,3 +1,6 @@
 .body {
-  background-color: red;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
 }

src/style.css

@@ -1,17 +1,41 @@
 import { type PropType, defineComponent } from 'vue'
-import { NavPage, SidePage } from '@0x30/vue-navigation-layout'
+import { SidePage } from '@0x30/vue-navigation-layout'
 
 import styles from './index.module.scss'
+import { back, push, useQuietPage } from '@0x30/vue-navigation'
 
 const Component = defineComponent({
   name: 'AlertPage',
-  setup: (props, { slots }) => {
+  props: {
+    onConfirm: Function as PropType<(res: boolean) => void>,
+  },
+  setup: (props) => {
+    /// 将此页面配置为 安静的页面
+    useQuietPage()
+
+    const onClick = (res: boolean) => {
+      return async () => {
+        await back()
+        props.onConfirm?.(res)
+      }
+    }
+
     return () => (
-      <SidePage position='center'>
-        <div class={styles.body}>detail</div>
+      <SidePage position="center">
+        <div class={styles.body}>
+          <span>是否要返回</span>
+          <div>
+            <button onClick={onClick(true)}>确定</button>
+            <button onClick={onClick(false)}>取消</button>
+          </div>
+        </div>
       </SidePage>
     )
   },
 })
 
-export default Component
+export const useConfirm = () => {
+  return new Promise<boolean>((resolve) => {
+    push(<Component onConfirm={resolve} />)
+  })
+}

src/util/index.tsx

@@ -0,0 +1,3 @@
+.body {
+  background-color: #fff;
+}

src/views/alert/index.module.scss

@@ -1,39 +1,24 @@
 import { defineComponent } from 'vue'
 import { NavPage } from '@0x30/vue-navigation-layout'
-import { onDidAppear, onDidDisappear, onWillAppear, onWillDisappear, push } from '@0x30/vue-navigation'
+import { back, useLeaveBefore } from '@0x30/vue-navigation'
 
-import AlertPage from '../alert'
+import { useConfirm } from '../alert'
+import styles from './index.module.scss'
+import { useHooks } from '../../util'
 
 const Component = defineComponent({
   name: 'HomePage',
-  setup: (props, { slots }) => {
-
-    onWillAppear(() => {
-      console.log('detail', '即将展示')
-    })
-
-    onWillDisappear(() => {
-      console.log('detail', '即将消失')
-    })
-
-    onDidAppear(() => {
-      console.log('detail', '展示')
-    })
-
-    onDidDisappear(() => {
-      console.log('detail', '消失')
-    })
+  setup: () => {
+    useHooks('详情')
+    /// 返回的时候 先弹出框询问用户
+    useLeaveBefore(useConfirm)
 
     return () => (
-      <NavPage>
+      <NavPage class={styles.body}>
         detail
-        <button
-          onClick={() => {
-            push(<AlertPage />)
-          }}
-        >
-          alert
-        </button>
+        <div>
+          <button onClick={back}>back</button>
+        </div>
       </NavPage>
     )
   },

src/views/alert/index.tsx

@@ -1,46 +1,8 @@
 .body {
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-
-  .main {
-    padding: 20px;
-    border-radius: 8px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #fff;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    min-width: 88px;
-    height: 88px;
-
-    margin: 0 30px;
-
-    box-shadow: -5px 0px 20px 0px rgba(100, 100, 100, 0.15);
-
-    *:nth-child(2) {
-      margin-top: 16px;
-    }
-
-    img {
-      width: 30px;
-      height: 30px;
-    }
+  background-color: #fff;
+}
 
-    span {
-      font-size: 14px;
-      text-align: center;
-    }
-  }
+.content {
+  background-color: red;
+  position: relative;
 }