feat: 保存

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vite build",
     "preview": "vite preview"
   },

src/App.vue

@@ -1,17 +1,28 @@
 <template>
   <full-page ref="fullpage" :options="options" @after-load="afterLoad">
-    <View />
+    <View :fullpage="fullpage" />
   </full-page>
 </template>
 
 <script setup>
 import FullPage from "./components/fullpage/fullpage.vue";
 import View from "./view/index.vue";
-import { ref } from "vue";
+import { onMounted, ref, watchEffect, getCurrentInstance } from "vue";
+
+const instance = getCurrentInstance();
+const fullpage = ref();
+onMounted(() => {
+  watchEffect(() => {
+    if (instance.proxy.$refs.fullpage) {
+      fullpage.value = instance.proxy.$refs.fullpage;
+    }
+  });
+});
+
 const options = ref({
   licenseKey: "",
   menu: ".nav",
-  // anchors: ["page1", "page2", "page3"],
+  // anchors: ["section1", "page2", "page3"],
   controlArrows: true,
   scrollOverflow: false,
   // scrollBar: true,

src/components/navGuide.vue

@@ -1,20 +1,20 @@
 <template>
   <Teleport to="body">
     <ul class="nav">
-      <li class="active" num="1">
+      <li data-menuanchor="section1" class="active" @click="handleSlideTo(1)">
         <i></i>
         <div class="title">
           <h3>首页</h3>
         </div>
       </li>
-      <li num="3" class="">
+      <li data-menuanchor="section3" @click="handleSlideTo(3)">
         <i></i>
         <div class="title">
           <h3>开篇</h3>
         </div>
       </li>
 
-      <li num="4">
+      <li @click="handleSlideTo(4)">
         <i></i>
         <div class="title">
           <p>第一章</p>
@@ -22,7 +22,7 @@
         </div>
       </li>
 
-      <li num="22">
+      <li @click="handleSlideTo(22)">
         <i></i>
         <div class="title">
           <p>第二章</p>
@@ -48,9 +48,28 @@
   </Teleport>
 </template>
 <script setup>
+import { computed, onMounted, watch, watchEffect } from "vue";
+const props = defineProps({
+  fullpage: Object,
+});
+const current = computed(() => props.fullpage.api.tActiveSection());
 defineOptions({
   name: "nav-guide",
 });
+onMounted(() => {
+  watchEffect(() => {
+    if (props.fullpage) {
+      console.log("props.fullpage", props.fullpage);
+    }
+  });
+});
+
+const handleSlideTo = (index) => {
+  if (props.fullpage) {
+    console.log("index", index);
+    props.fullpage.api.moveTo(index);
+  }
+};
 </script>
 <style lang="scss">
 .nav {
@@ -66,13 +85,7 @@ defineOptions({
     justify-content: center;
     margin-bottom: 10vh;
     cursor: pointer;
-    &.active {
-      .title {
-        opacity: 1;
-        visibility: visible;
-        padding-left: 2rem;
-      }
-    }
+
     &::after {
       content: "";
       position: absolute;
@@ -119,6 +132,15 @@ defineOptions({
         font-size: 1.25rem;
       }
     }
+
+    &:hover,
+    &.active {
+      .title {
+        opacity: 1;
+        visibility: visible;
+        padding-left: 2rem;
+      }
+    }
   }
 }
 </style>

src/pages/section1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section1">
+  <div class="section section1" data-anchor="section1">
     <div class="logo" />
     <div class="title1">
       <span>南京博物院90周年院庆系列特展</span>

src/view/index.vue

@@ -1,6 +1,6 @@
 <template>
   <mouse-tips />
-  <nav-guide />
+  <nav-guide :fullpage="fullpage" />
   <section1></section1>
   <section2 />
   <section3 />
@@ -10,6 +10,7 @@
   <div class="section">Section 5</div>
 </template>
 <script setup>
+import { ref } from "vue";
 import mouseTips from "../components/mouseTips.vue";
 import navGuide from "../components/navGuide.vue";
 import Section1 from "../pages/section1.vue";
@@ -18,4 +19,7 @@ import Section3 from "../pages/section3.vue";
 defineOptions({
   name: "View",
 });
+defineProps({
+  fullpage: Object,
+});
 </script>