Vue 3 框架toggleNavbar()

这段代码是一个使用 Vue 3 框架的示例，定义了一个应用并挂载到页面上的 #app 元素。以下是对代码的详细解释：

Vue 应用定义

const homepage_active = Vue.createApp({
    data() {
        return {
            isCollapsed: false,
            isCollapsed_nav: false,
            menuItems: [
                // 菜单项数组
                // 省略的代码
            ]
        }
    },
    methods: {
        toggleNavbar() {
            // 切换导航栏的折叠状态
            this.isCollapsed_nav = !this.isCollapsed_nav;
            setTimeout(() => {
                // 300毫秒后切换内容的折叠状态
                this.isCollapsed = !this.isCollapsed;
            }, 100); // 延时100毫秒，确保内容先隐藏
        },
        openInFrame(url) {
            // 在iframe中打开指定的URL
            document.getElementById('contentFrame').src = url;
            console.log("Opening URL in frame:", url);
            // event.preventDefault();
            // event.stopPropagation();
        }
    }
});
homepage_active.mount('#app');

详细解析

1. 创建 Vue 应用:

   const homepage_active = Vue.createApp({
       // ... Vue 配置
   });
   

   Vue.createApp 用于创建一个新的 Vue 应用实例。这个实例会管理应用的状态和行为。

2. 数据 (data):

   data() {
       return {
           isCollapsed: false,
           isCollapsed_nav: false,
           menuItems: [
               // 菜单项
           ]
       }
   }
   

   • isCollapsed: 控制某个部分的折叠状态。
   • isCollapsed_nav: 控制导航栏的折叠状态。
   • menuItems: 一个包含菜单项的数组，每个菜单项有 name、icon 和 subItems（子菜单项）。每个子菜单项有 name、url 和 _class。

3. 方法 (methods):

   methods: {
       toggleNavbar() {
           this.isCollapsed_nav = !this.isCollapsed_nav;
           setTimeout(() => {
               this.isCollapsed = !this.isCollapsed;
           }, 100);
       },
       openInFrame(url) {
           document.getElementById('contentFrame').src = url;
           console.log("Opening URL in frame:", url);
       }
   }
   

   • toggleNavbar(): 切换导航栏的折叠状态。首先更改 isCollapsed_nav 的值，然后在 100 毫秒后再更改 isCollapsed 的值。这种延时处理可能是为了确保导航栏的显示或隐藏效果能顺利过渡。
   • openInFrame(url): 修改页面上 id 为 contentFrame 的 iframe 的 src 属性，以在 iframe 中加载指定的 URL。这个方法会在控制台输出要打开的 URL。

4. 挂载 Vue 应用:

   homepage_active.mount('#app');
   

   mount('#app') 将 Vue 应用挂载到页面上具有 id="app" 的元素上。这样，Vue 应用的状态和行为就会与这个 DOM 元素关联起来。

总结

这段代码定义了一个 Vue 应用，其中包括一个可以折叠的导航栏和一个用来在 iframe 中加载页面内容的功能。toggleNavbar 方法用于切换导航栏的折叠状态，openInFrame 方法用于在 iframe 中显示指定的页面。通过 Vue.createApp 和 mount 方法，将应用挂载到页面上，动态更新页面内容和状态。