<template> <div class="index"> <Header class="topHeader"></Header> <LeftMenu class="leftMenu"></LeftMenu> <div class="rightContainer" :class="{'content-collapse':collapse}"> <Tags/> <div class="content"> <transition name="move" mode="out-in"> <keep-alive :include="tagsList"> <router-view></router-view> </keep-alive> </transition> </div> </div> </div> </template> <script> import Header from "../components/Header"; import LeftMenu from "../components/LeftMenu"; import bus from "../common/bus"; import Tags from "../common/Tags"; // import moment from 'moment' // @ is an alias to /src export default { name: "Index", data() { return { tagsList: [], collapse: false }; }, components: { Header, LeftMenu, Tags }, created() { //内容区域跟随变化 bus.$on("collapse", msg => { console.log(msg); this.collapse = msg; }), // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。 bus.$on("tags", msg => { let arr = []; for (let i = 0, len = msg.length; i < len; i++) { msg[i].name && arr.push(msg[i].name); } this.tagsList = arr; // console.log(tags) }); } }; </script> <style scoped> .index { width: 100%; height: 100%; overflow: hidden; } .content { width: auto; height: 100%; padding: 10px; overflow-y: scroll; box-sizing: border-box; } .rightContainer.content-collapse { left: 48px; } .rightContainer { position: absolute; left: 180px; right: 0; top: 72px; height: 100%; overflow-y: scroll; padding-bottom: 30px; transition: left 0.3s ease-in-out; } </style>

这是一个 Vue.js 组件的代码，它定义了一个名为 Index 的组件。这个组件包含了一个 Header 组件、一个 LeftMenu 组件和一个 Tags 组件。其中，Header 组件和 LeftMenu 组件用于显示网站的顶部和左侧菜单栏，Tags 组件则用于标记网站的标签页。在组件的 created 钩子函数中，它监听了两个事件：collapse 和 tags，用于控制组件的展开和标签页的显示。组件还包含了一些 CSS 样式，用于控制组件的布局和样式。