测试 编辑src/views/Home.vue，添加script段。 <script setup> import { onMounted } from 'vue' onMounted(() => { console.log('首页挂载完成') }) </...

编辑src/views/Main.vue，script段添加onTagClick方法 const onTagClick = (path: string) => { if (path == fastnavStore.currPath) return router.push(pat...

多页签添加移除方法 编辑src/store/fastnav.ts，添加removeData方法。 removeData(path: string): string { if (this.datas.length <= 1) return '' for (let...

多页签测试 编辑src/views/Main.vue，template段header-center下最后面添加如下代码。 <el-scrollbar> <div class="navbar"> <el-tag v-for=...

问题 编辑src/views/Home.vue，添加一个主颜色的按钮。 <template> <el-button type="primary">Primary</el-button> <p v-for="item in 50...

之前的主颜色是静态设置的，这里通过颜色选择器选择颜色动态设置。 删除静态设置主颜色 编辑src/style.css，删除如下静态主颜色样式。 :root { --el-color-primary: re...

编辑src/style.css，添加如下样式，自定义一个主颜色，在亮色和暗黑模式下都使用这个主颜色。 :root { --el-color-primary: green; } :root.dark { --el-color-prima...

设置 编辑src/main.ts，引入暗黑模式样式文件。 import 'element-plus/dist/index.css' import 'element-plus/theme-chalk/dark/css-vars.css' 编辑src/views/Main.vue，...

安装插件 npm install @vueuse/core@10.11.0 编辑src/views/Main.vue，template段header-right下最前面添加如下代码。 <el-icon style="margin-right: 15px;" @click=...

编辑src/views/Main.vue，template段header-right修改如下。 <div class="header-right"> <el-dropdown trigger="click" @command="handleUserCommand">...

编辑src/views/Main.vue，template段header-left修改如下。logo和标题全部在router-link标签下，即点击的时候会跳转到/这个路由，展开状态下显示logo和标题，折叠状态下...

现在当我们把菜单折叠然后再刷新浏览器，菜单又回到默认的展开状态了。我们要把展开折叠状态持久化，让它在下次进入时为关闭前的状态。为了实现这个目标，我们要引入pini...

顶部 center 添加图标 编辑src/views/Main.vue，template段header-center修改如下。即折叠状态显示expand图标，展开状态显示fold图标，并使用size属性设置了图标大小。 &...

获取菜单宽度 [图片] 通过调试工具得知菜单展开时宽度为300px 编辑src/views/Main.vue，设置菜单折叠。 <el-menu router :default-active="route.path" :collapse="tr...

顶部整体使用左、中、右的布局。左侧宽度跟菜单宽度一样，如果菜单未折叠就显示后台logo和后台名称，如果折叠了就只显示后台logo。右侧内容自适应，主要是显示系统工具按...