feat:修改学习路径操作

src/components/OpenPages.vue

@@ -1,37 +1,51 @@
 <template>
   <div class="openPages">
-    <div
-      v-for="(value, index) in openList"
-      :key="index"
-      style="position: relative"
+    <draggable
+      v-model="openList"
+      chosenClass="chosen"
+      forceFallback="true"
+      group="people"
+      animation="1000"
+      @start="onStart"
+      @end="onEnd"
+      :list="openList"
+      style="display: flex"
     >
-      <router-link
-        :to="value.href"
-        class="openItems"
-        :style="{ background: value.active ? '#f5f7fa' : '' }"
-      >
-        <div
-          :style="{
-            color: value.active
-              ? 'rgba(64, 158, 255, 1)'
-              : 'rgba(135, 139, 146, 1)',
-          }"
-        >
-          {{ value.pagename }}
+      <template #item="{ element }">
+        <div style="position: relative">
+          <router-link
+            :to="element.href"
+            class="openItems"
+            :style="{ background: element.active ? '#f5f7fa' : '' }"
+          >
+            <div
+              :style="{
+                color: element.active
+                  ? 'rgba(64, 158, 255, 1)'
+                  : 'rgba(135, 139, 146, 1)',
+              }"
+            >
+              {{ element.pagename }}
+            </div>
+          </router-link>
+          <div class="close" @click.stop="closePage(element)">
+            <img src="../assets/images/openPages/close.png" />
+          </div>
         </div>
-      </router-link>
-      <div class="close" @click.stop="closePage(value)">
-        <img src="../assets/images/openPages/close.png" />
-      </div>
-    </div>
+      </template>
+    </draggable>
   </div>
 </template>
 <script>
 import { reactive, toRefs } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
+import draggable from "vuedraggable";
 export default {
   name: "OpenPages",
+  components: {
+    draggable,
+  },
   setup() {
     const store = useStore();
     const $router = useRouter();
@@ -69,7 +83,7 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
+<style lang="scss">
 .openPages {
   width: 100%;
   // height: 50px;