修复重新加载bootstrap.js导致下拉菜单失效；修复#11

Anjaxs · Mar 15, 2023 · e527531 · e527531
1 parent 8dbc1da
commit e527531
Show file tree

Hide file tree

Showing 5 changed files with 2,595 additions and 30 deletions.
diff --git a/public/assets/js/all.js b/public/assets/js/all.js
diff --git a/public/index.html b/public/index.html
@@ -36,9 +36,9 @@
 <body class="page-body">
   <div id="app"></div>
   <!-- built files will be auto injected -->
-  <!-- <script src="./assets/js/jquery-1.11.1.min.js"></script>
+  <script src="./assets/js/jquery-1.11.1.min.js"></script>
   <script src="./assets/js/bootstrap.min.js"></script>
-  <script src="./assets/js/TweenMax.min.js"></script>
+  <!--<script src="./assets/js/TweenMax.min.js"></script>
   <script src="./assets/js/resizeable.js"></script>
   <script src="./assets/js/joinable.js"></script>
   <script src="./assets/js/xenon-api.js"></script>

diff --git a/src/assets/js/app.js b/src/assets/js/app.js
@@ -1,20 +1,12 @@
 export function loadJs() {
     const jsArr = [
-        { id: "js-1", src: "./assets/js/jquery-1.11.1.min.js" },
-        { id: "js-2", src: "./assets/js/bootstrap.min.js" },
-        { id: "js-3", src: "./assets/js/TweenMax.min.js" },
-        { id: "js-4", src: "./assets/js/resizeable.js" },
-        { id: "js-5", src: "./assets/js/joinable.js" },
-        { id: "js-6", src: "./assets/js/xenon-api.js" },
-        { id: "js-7", src: "./assets/js/xenon-toggles.js" },
-        { id: "js-8", src: "./assets/js/xenon-custom.js" },
-        { id: "js-9", src: "./assets/js/app.js" },
+        // { id: "js-1", src: "./assets/js/jquery-1.11.1.min.js" },
+        // { id: "js-2", src: "./assets/js/bootstrap.min.js" },
+        { id: "js-3", src: "./assets/js/all.js" },
     ];
     const srcArr = document.getElementsByTagName("script");
     for (let i = 0; i < srcArr.length; i++) {
         for (let j = 0; j < jsArr.length; j++) {
-            // console.log(`srcArr[${i}]`, srcArr[i]);
-            // console.log(`jsArr[${j}]`, jsArr[j]);
             if (srcArr[i].id == jsArr[j].id) {
                 srcArr[i].remove();
             }
@@ -24,8 +16,8 @@ export function loadJs() {
     const body = document.getElementsByTagName('body')[0];
     for (let i = 0; i < jsArr.length; i++) {
         const script = document.createElement("script");
-        script.src = jsArr[i].src;
         script.id = jsArr[i].id;
+        script.src = jsArr[i].src;
         script.defer = true;
         body.append(script);
     }

diff --git a/src/main.js b/src/main.js
@@ -11,7 +11,6 @@ import './assets/css/xenon-core.css'
 import './assets/css/xenon-components.css'
 import './assets/css/xenon-skins.css'
 import './assets/css/nav.css'
-import { loadJs } from './assets/js/app.js' 
 
 Vue.config.productionTip = false
 Vue.use(VueRouter)
@@ -26,12 +25,6 @@ const router = new VueRouter({
   mode: 'history'
 })
 
-router.afterEach((to, from, next) => {
-  console.log("to => ", to, "from => ", from, "next => ",  next);
-  if (to.path == '/' && to.hash == '') {
-    loadJs();
-  }
-})
 
 new Vue({
   render: h => h(App),

diff --git a/src/views/index.vue b/src/views/index.vue
@@ -5,10 +5,10 @@
         <header class="logo-env">
           <!-- logo -->
           <div class="logo">
-            <a href="#" class="logo-expanded">
+            <a href="javascript:void(0)" class="logo-expanded">
               <img src="../assets/images/[email protected]" width="100%" alt="" />
             </a>
-            <a href="#" class="logo-collapsed">
+            <a href="javascript:void(0)" class="logo-collapsed">
               <img
                 src="../assets/images/[email protected]"
                 width="40"
@@ -17,10 +17,10 @@
             </a>
           </div>
           <div class="mobile-menu-toggle visible-xs">
-            <a href="#" data-toggle="user-info-menu">
+            <a href="javascript:void(0)" data-toggle="user-info-menu">
               <i class="linecons-cog"></i>
             </a>
-            <a href="#" data-toggle="mobile-menu">
+            <a href="javascript:void(0)" data-toggle="mobile-menu">
               <i class="fa-bars"></i>
             </a>
           </div>
@@ -63,10 +63,10 @@
       <nav class="navbar user-info-navbar" role="navigation">
         <ul class="user-info-menu left-links list-inline list-unstyled">
           <li class="hidden-sm hidden-xs">
-            <a href="#" data-toggle="sidebar"><i class="fa-bars"></i></a>
+            <a href="javascript:void(0)" data-toggle="sidebar"><i class="fa-bars"></i></a>
           </li>
           <li class="dropdown hover-line language-switcher">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
               <img :src="lang.flag" /> {{ lang.name }}
             </a>
             <ul class="dropdown-menu languages">
@@ -75,7 +75,7 @@
                 v-for="langItem in langList"
                 :key="langItem.key"
               >
-                <a href="#" @click="lang = langItem">
+                <a href="javascript:void(0)" @click="lang = langItem">
                   <img :src="langItem.flag" /> {{ langItem.name }}
                 </a>
               </li>
@@ -109,7 +109,7 @@
 import WebItem from "../components/WebItem.vue";
 import Footer from "../components/Footer.vue";
 import itemsData from "../assets/data.json";
-// import { loadJs } from '../assets/js/app.js'
+import { loadJs } from '../assets/js/app.js'
 
 export default {
   name: "Index",
@@ -137,7 +137,7 @@ export default {
   },
   created() {
     this.lang = this.langList[0];
-    // loadJs();
+    loadJs();
   },
   methods: {
     transName(webItem) {